@charset "UTF-8";
:root {
  --GUI_WINDOW_backgroundColor:#64646e;
  --GUI_WINDOW_width:350px;
  --GUI_WINDOW_height:500px;
  --GUI_WINDOW_left:-60;
  --GUI_WINDOW_top:-73;
  --GUI_TITLE_fontSize:18;
  --GUI_TITLE_color:white;
  --GUI_TITLE_paddingTop:25px;
  --GUI_TITLE_width:90%;
  --GUI_IMAGE_width:90%;
  --GUI_IMAGE_height:200px;
  --GUI_IMAGE_paddingTop:5px;
  --GUI_DESCRIPTION_fontSize:13;
  --GUI_DESCRIPTION_color:white;
  --GUI_DESCRIPTION_lineSpacing:2px;
  --GUI_DESCRIPTION_background:#464650;
  --GUI_DESCRIPTION_width:100%;
  --GUI_DESCRIPTION_paddingTop:10px;
  --GUI_DESCRIPTION_height:100%;
  --GUI_scrollViewer_width:90%;
  --GUI_scrollViewer_height_with_image:230px;
  --GUI_scrollViewer_height_without_image:400px;
  --GUI_scrollViewer_color:#ff770000;
  --GUI_scrollViewer_paddingTop:10%;
  --GUI_scrollViewer_barColor:rgba(255, 255, 255, 0.7019607843);
  --GUI_scrollViewer_barBackground:transparent;
  --DESSIN_LIBRE_surfaceColor:Surface;
  --DESSIN_LIBRE_selectedSurfaceColor:SurfaceSelect;
  --DESSIN_LIBRE_surfaceAsWallColor:marronMur4;
  --DESSIN_LIBRE_surfaceAsFlatRoofColor:gris_flatRoof4;
  --DESSIN_LIBRE_surfaceIntColor:gris_clair4;
  --DESSIN_LIBRE_surfaceExtColor:blanc4;
  --DESSIN_LIBRE_previewPointColor:BleuLeonard;
  --DESSIN_LIBRE_previewLineColor:Gris_moyen;
  --DESSIN_LIBRE_previewLineColor3:noir3;
  --DESSIN_LIBRE_pointColor:OrangeLeonard;
  --DESSIN_LIBRE_centerPointColor:Jaune;
  --DESSIN_LIBRE_lineColor:Noir;
  --DESSIN_LIBRE_oprhanLineColor:Gris_moyen;
  --DESSIN_LIBRE_selectedLineColor:OrangeKeops;
  --DESSIN_LIBRE_ridgesLineColor:Rouge;
  --DESSIN_LIBRE_guttersLineColor:Bleu;
  --DESSIN_LIBRE_magnetismXColor:Rouge;
  --DESSIN_LIBRE_magnetismXColor3:rouge3;
  --DESSIN_LIBRE_magnetismYColor:Bleu;
  --DESSIN_LIBRE_magnetismYColor3:bleu3;
  --DESSIN_LIBRE_magnetismZColor:Vert;
  --DESSIN_LIBRE_magnetismZColor3:vert3;
  --DESSIN_LIBRE_magnetismParallelColor:Magenta;
  --DESSIN_LIBRE_magnetismParallelColor3:magenta3;
  --DESSIN_LIBRE_magnetismPerpendicularColor:Cyan;
  --DESSIN_LIBRE_magnetismPerpendicularColor3:cyan3;
  --SVG_Bouton_Structure_Veranda: ../style/icones/Bouton_Structure_Veranda.svg;
  --SVG_Bouton_Structure_Pergola: ../style/icones/Bouton_Structure_Pergola.svg;
  --SVG_Bouton_Structure_Carport: ../style/icones/Bouton_Structure_Carport.svg;
  --SVG_Bouton_Structure_Poolhouse: ../style/icones/Bouton_Structure_Poolhouse.svg;
  --SVG_Bouton_Structure_ChassisSeuls: ../style/icones/Bouton_Structure_Chassis_Seuls.svg;
  --SVG_Bouton_Structure_Veranda_Libre: ../style/icones/Bouton_Structure_Libre.svg;
  --SVG_Bouton_Structure_Portail: ../style/icones/Bouton_Structure_Portail.svg;
  --SVG_Bouton_Structure_Maison: ../style/icones/Bouton_Structure_Maison.svg;
  --SVG_Bouton_Structure_Garde_Corps: ../style/icones/Bouton_Structure_Garde_Corps.svg;
  --SVG_Bouton_Structure_Abri_Piscine: ../style/icones/Bouton_Structure_Abri_Piscine.svg;
  --SVG_Bouton_BriseVue: ../style/icones/Bouton_BriseVue.svg;
  --SVG_Bouton_BSO: ../style/icones/Bouton_BSO.svg;
  --SVG_Bouton_Clin: ../style/icones/Bouton_Clin.svg;
  --SVG_Bouton_Coulissant: ../style/icones/Bouton_Coulissant.svg;
  --SVG_Bouton_Fixe: ../style/icones/Bouton_Fixe.svg;
  --SVG_Bouton_Muret: ../style/icones/Bouton_Muret.svg;
  --SVG_Bouton_OB: ../style/icones/Bouton_OB.svg;
  --SVG_Bouton_OB2V: ../style/icones/Bouton_OB2V.svg;
  --SVG_Bouton_Porte: ../style/icones/Bouton_Porte.svg;
  --SVG_Bouton_Poteau: ../style/icones/Bouton_Poteau.svg;
  --SVG_Bouton_RideauVerre: ../style/icones/Bouton_RideauVerre.svg;
  --SVG_Bouton_Screen: ../style/icones/Bouton_Screen.svg;
  --SVG_Bouton_Soufflet: ../style/icones/Bouton_Soufflet.svg;
  --SVG_Bouton_Trapeze: ../style/icones/Bouton_Trapeze.svg;
  --SVG_Bouton_Volet_Roulant: ../style/icones/Bouton_Volet_Roulant.svg;
  --SVG_Bouton_Rolax: ../style/icones/Bouton_Rolax.svg;
  --SVG_Bouton_Dome: ../style/icones/Bouton_Dome.svg;
  --SVG_Bouton_Ferme: ../style/icones/Bouton_Ferme.svg;
  --SVG_Bouton_StoreExterieurToiture: ../style/icones/Bouton_StoreExterieurToiture.svg;
  --SVG_Bouton_StoreInterieurToiture: ../style/icones/Bouton_StoreInterieurToiture.svg;
  --SVG_Bouton_Bardage: ../style/icones/Bouton_Bardage.svg;
  --SVG_Bouton_Claustra: ../style/icones/Bouton_Claustra.svg;
  --SVG_chassis_cheneau_gouttiere: ../style/icones/chassis_cheneau_gouttiere.svg;
  --SVG_chassis_guillotine: ../style/icones/chassis_guillotine.svg;
  --SVG_chassis_renfort: ../style/icones/chassis_renfort.svg;
  --SVG_chassis_repliable: ../style/icones/chassis_repliable.svg;
  --SVG_chassis_traverses: ../style/icones/chassis_traverses.svg;
  --SVG_chassis_zone_securite_sous_chassis: ../style/icones/chassis_zone_securite_sous_chassis.svg;
}

:root {
  --couleurFenetre: #fff;
  --GUI_scrollViewer_barWidth:8px;
  --GUI_scrollViewer_borderRadius:4px;
}

/*ANNIMATIONS*/
@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes zoom-in {
  0% {
    transform: scale(0, 0);
  }
  25% {
    transform: scale(0.25, 0.25);
  }
  50% {
    transform: scale(0.5, 0.5);
  }
  75% {
    transform: scale(0.75, 0.75);
  }
  100% {
    transform: scale(1, 1);
  }
}
@keyframes zoom-out {
  0% {
    transform: scale(1, 1);
  }
  25% {
    transform: scale(0.75, 0.75);
  }
  50% {
    transform: scale(0.5, 0.5);
  }
  75% {
    transform: scale(0.25, 0.25);
  }
  100% {
    transform: scale(0, 0);
  }
}
/************/
html, body {
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  cursor: default;
  user-drag: none;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -ms-user-drag: none;
  -o-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

::-webkit-scrollbar {
  width: 8px;
  background-color: transparent;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.7019607843);
  border-radius: 4px;
}

#page-accueil {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.debug {
  display: none;
}

code {
  font-family: courier, monospace;
}

.invisible {
  display: none !important;
}

.zoom-in {
  animation: zoom-in 0.1s ease-in;
}

.zoom-out {
  animation: zoom-out 0.1s ease-out;
}

[disabled],
[disabled] *,
[disabled]::-webkit-slider-runnable-track,
[disabled]::-webkit-slider-thumb {
  cursor: not-allowed !important;
}

.waiting {
  cursor: wait;
}

.progress {
  cursor: progress;
}

.pointer {
  cursor: pointer;
}

.spin {
  border: 12px solid #969696;
  border-radius: 50%;
  border-top: 12px solid #fff;
  width: 80px;
  height: 80px;
  animation: spin 1.5s linear infinite;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 31;
}

.grey-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 30;
  background: rgba(0, 0, 0, 0.5);
}

.disable-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 30;
}

.progress-bar_div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
}

#body_progress-bar {
  width: 50%;
}

[data-description] {
  cursor: help;
}

[data-description]:hover::after {
  content: attr(data-description);
  position: fixed;
  bottom: 0;
  left: 0;
  min-width: 300px;
  max-width: 450px;
  border: 1px #aaaaaa solid;
  border-radius: 0px 10px 0px 0px;
  background-color: #ffffcc;
  color: #000;
  font-size: 8pt;
  z-index: 21;
}

canvas:focus-visible {
  outline-offset: 0px;
  outline: none;
}

.canvasZone {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: calc(100% - 55px - 2px);
}

#canvas3D {
  position: relative;
  width: 100%;
  height: 100%;
}

.fullScreenCanvas {
  top: 0 !important;
  height: 100% !important;
}

#canvasApercu {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

.modeDessinLibre {
  cursor: url("../../img/curseurs/pencil.png") 0 32, crosshair;
}

.placeUnder {
  z-index: -1 !important;
}

.BloclogoGammes {
  position: absolute;
  bottom: 5px;
  right: 5px;
  height: 47px;
  width: -moz-fit-content;
  width: fit-content;
  z-index: 10;
}
.BloclogoGammes .logo {
  width: 100px;
  height: 47px;
}

.dragBoxRectangle {
  position: absolute;
  background-color: #FF7800;
  opacity: 0.5;
}

.onTop {
  z-index: 100 !important;
}

button {
  background-color: transparent;
}
button:hover {
  cursor: pointer;
}

.ButtonSVG {
  background: white;
  width: 35px;
  height: 35px;
  overflow: hidden;
  border: none;
  padding: 0;
  vertical-align: middle;
  user-drag: none;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -ms-user-drag: none;
  -o-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
}
.ButtonSVG:not([disabled]):hover {
  background: var(--couleurFenetre);
}
.ButtonSVG:not([disabled])[data-isPersisted=true] {
  background: var(--couleurFenetre);
}
.ButtonSVG ~ .badge {
  transition: display 0.5s ease;
  position: absolute;
  right: calc(20px / 2 * -1);
  font-size: smaller;
  background: red;
  color: #fff;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  border-radius: 50%;
  left: 2px;
}
.ButtonSVG ~ .badge:empty {
  display: none;
}

.ButtonSVG2E {
  width: 35px;
  height: 35px;
  overflow: hidden;
  border: none;
  padding: 0;
}
.ButtonSVG2E img {
  padding: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 0%;
     object-position: 0%;
  user-drag: none;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -ms-user-drag: none;
  -o-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
}
.ButtonSVG2E img:hover {
  -o-object-position: 100%;
     object-position: 100%;
}
.ButtonSVG2E[data-isPersisted=true] img {
  -o-object-position: 100%;
     object-position: 100%;
}

.largeButton {
  width: 50px;
  height: 50px;
}

.separationVerticale {
  width: 1px;
  height: calc(35px - 10%);
  margin-top: calc(35px * 0.1 / 2);
}

.separationHorizontale {
  margin: 4px auto;
  height: 1px;
  width: calc(35px - 10%);
}

.separationVerticale,
.separationHorizontale {
  background-color: #adb5bd;
}

.SVG_fleche {
  -webkit-mask: url("../icones/fleche.svg");
          mask: url("../icones/fleche.svg");
}

.SVG_flecheRemplissages {
  -webkit-mask: url("../icones/flecheRemplissages.svg");
          mask: url("../icones/flecheRemplissages.svg");
}

.SVG_flecheVantaux {
  -webkit-mask: url("../icones/flecheVantaux.svg");
          mask: url("../icones/flecheVantaux.svg");
}

.SVG_agrandir {
  -webkit-mask: url("../icones/agrandir.svg");
          mask: url("../icones/agrandir.svg");
}

.SVG_croix {
  -webkit-mask: url("../icones/croix.svg");
          mask: url("../icones/croix.svg");
}

.SVG_translation_relative {
  -webkit-mask: url("../icones/translation_relative.svg");
          mask: url("../icones/translation_relative.svg");
}

.SVG_translation_absolue {
  -webkit-mask: url("../icones/translation_absolue.svg");
          mask: url("../icones/translation_absolue.svg");
}

.SVG_rotation_relative {
  -webkit-mask: url("../icones/rotation_relative.svg");
          mask: url("../icones/rotation_relative.svg");
}

.SVG_rotation_absolue {
  -webkit-mask: url("../icones/rotation_absolue.svg");
          mask: url("../icones/rotation_absolue.svg");
}

.SVG_recharger {
  -webkit-mask: url("../icones/recharger.svg");
          mask: url("../icones/recharger.svg");
}

.SVG_annuler {
  -webkit-mask: url("../icones/annuler.svg");
          mask: url("../icones/annuler.svg");
}

.SVG_oeil {
  -webkit-mask: url("../icones/oeil.svg");
          mask: url("../icones/oeil.svg");
}

.SVG_valider {
  -webkit-mask: url("../icones/valider.svg");
          mask: url("../icones/valider.svg");
}

.SVG_triangle {
  -webkit-mask: url("../icones/triangle-right.svg");
          mask: url("../icones/triangle-right.svg");
}

.SVG_telecharger {
  -webkit-mask: url("../icones/telecharger.svg");
          mask: url("../icones/telecharger.svg");
}

.SVG_ajouter {
  -webkit-mask: url("../icones/ajouter.svg");
          mask: url("../icones/ajouter.svg");
}

.SVG_supprimer {
  -webkit-mask: url("../icones/supprimer.svg");
          mask: url("../icones/supprimer.svg");
}

.SVG_cube_3D {
  -webkit-mask: url("../icones/cube_3D.svg");
          mask: url("../icones/cube_3D.svg");
}

.SVG_options {
  -webkit-mask: url("../icones/options.svg");
          mask: url("../icones/options.svg");
}

.SVG_reglages {
  -webkit-mask: url("../icones/reglages.svg");
          mask: url("../icones/reglages.svg");
}

.SVG_positionnement {
  -webkit-mask: url("../icones/positionnement.svg");
          mask: url("../icones/positionnement.svg");
}

.SVG_unites {
  -webkit-mask: url("../icones/unites.svg");
          mask: url("../icones/unites.svg");
}

.SVG_listing {
  -webkit-mask: url("../icones/listing.svg");
          mask: url("../icones/listing.svg");
}

.SVG_euro {
  -webkit-mask: url("../icones/euro.svg");
          mask: url("../icones/euro.svg");
}

.SVG_crayon {
  -webkit-mask: url("../icones/crayon.svg");
          mask: url("../icones/crayon.svg");
}

.SVG_informations {
  -webkit-mask: url("../icones/informations.svg");
          mask: url("../icones/informations.svg");
}

.SVG_horloge {
  -webkit-mask: url("../icones/horloge.svg");
          mask: url("../icones/horloge.svg");
}

.SVG_lancement_calcul {
  -webkit-mask: url("../icones/lancement_calcul.svg");
          mask: url("../icones/lancement_calcul.svg");
}

.SVG_retablir {
  -webkit-mask: url("../icones/retablir.svg");
          mask: url("../icones/retablir.svg");
}

.SVG_sauvegarder {
  -webkit-mask: url("../icones/sauvegarder.svg");
          mask: url("../icones/sauvegarder.svg");
}

.SVG_retour {
  -webkit-mask: url("../icones/retour.svg");
          mask: url("../icones/retour.svg");
}

.SVG_compas {
  -webkit-mask: url("../icones/compas.svg");
          mask: url("../icones/compas.svg");
}

.SVG_modifier {
  -webkit-mask: url("../icones/modifier.svg");
          mask: url("../icones/modifier.svg");
}

.SVG_spy {
  -webkit-mask: url("../icones/spy.svg");
          mask: url("../icones/spy.svg");
}

.SVG_unlock {
  -webkit-mask: url("../icones/unlock.svg");
          mask: url("../icones/unlock.svg");
}

.SVG_pin {
  -webkit-mask: url("../icones/pin.svg");
          mask: url("../icones/pin.svg");
}

.SVG_toolbox {
  -webkit-mask: url("../icones/toolbox.svg");
          mask: url("../icones/toolbox.svg");
}

.SVG_undo {
  -webkit-mask: url("../icones/undo.svg");
          mask: url("../icones/undo.svg");
}

.SVG_redo {
  -webkit-mask: url("../icones/redo.svg");
          mask: url("../icones/redo.svg");
}

.SVG_rotationY {
  -webkit-mask: url("../icones/rotation-y.svg");
          mask: url("../icones/rotation-y.svg");
}

.SVG_calques {
  -webkit-mask: url("../icones/calques.svg");
          mask: url("../icones/calques.svg");
}

.SVG_texture {
  -webkit-mask: url(#64646E);
          mask: url(#64646E);
}

.SVG_vue_gauche {
  -webkit-mask: url("../icones/vue_gauche.svg");
          mask: url("../icones/vue_gauche.svg");
}

.SVG_vue_perspective_gauche {
  -webkit-mask: url("../icones/vue_perspective_gauche.svg");
          mask: url("../icones/vue_perspective_gauche.svg");
}

.SVG_vue_avant {
  -webkit-mask: url("../icones/vue_avant.svg");
          mask: url("../icones/vue_avant.svg");
}

.SVG_vue_dessus {
  -webkit-mask: url("../icones/vue_dessus.svg");
          mask: url("../icones/vue_dessus.svg");
}

.SVG_vue_dessous {
  -webkit-mask: url("../icones/vue_dessous.svg");
          mask: url("../icones/vue_dessous.svg");
}

.SVG_vue_arriere {
  -webkit-mask: url("../icones/vue_arriere.svg");
          mask: url("../icones/vue_arriere.svg");
}

.SVG_vue_perspective_droite {
  -webkit-mask: url("../icones/vue_perspective_droite.svg");
          mask: url("../icones/vue_perspective_droite.svg");
}

.SVG_vue_droite {
  -webkit-mask: url("../icones/vue_droite.svg");
          mask: url("../icones/vue_droite.svg");
}

.SVG_structure {
  -webkit-mask: url("../icones/structure.svg");
          mask: url("../icones/structure.svg");
}

.SVG_façade {
  -webkit-mask: url("../icones/façade.svg");
          mask: url("../icones/façade.svg");
}

.SVG_materiaux {
  -webkit-mask: url("../icones/materiaux.svg");
          mask: url("../icones/materiaux.svg");
}

.SVG_dank {
  -webkit-mask: url("../icones/dank.svg");
          mask: url("../icones/dank.svg");
}

.SVG_terrain {
  -webkit-mask: url("../icones/terrain.svg");
          mask: url("../icones/terrain.svg");
}

.SVG_sculpter {
  -webkit-mask: url("../icones/sculpter.svg");
          mask: url("../icones/sculpter.svg");
}

.SVG_peindre {
  -webkit-mask: url("../icones/peindre.svg");
          mask: url("../icones/peindre.svg");
}

.SVG_sens_face {
  -webkit-mask: url("../icones/sens_face.svg");
          mask: url("../icones/sens_face.svg");
}

.SVG_surelever {
  -webkit-mask: url("../icones/surelever.svg");
          mask: url("../icones/surelever.svg");
}

.SVG_plans {
  -webkit-mask: url("../icones/plans.svg");
          mask: url("../icones/plans.svg");
}

.SVG_murs {
  -webkit-mask: url("../icones/murs.svg");
          mask: url("../icones/murs.svg");
}

.SVG_faitieres {
  -webkit-mask: url("../icones/faitieres.svg");
          mask: url("../icones/faitieres.svg");
}

.SVG_cheneaux {
  -webkit-mask: url("../icones/cheneaux.svg");
          mask: url("../icones/cheneaux.svg");
}

.SVG_toitPlat {
  -webkit-mask: url("../icones/toitPlat.svg");
          mask: url("../icones/toitPlat.svg");
}

.SVG_generer {
  -webkit-mask: url("../icones/generer.svg");
          mask: url("../icones/generer.svg");
}

.SVG_mobilier {
  -webkit-mask: url("../icones/mobilier.svg");
          mask: url("../icones/mobilier.svg");
}

.SVG_video {
  -webkit-mask: url("../icones/video.svg");
          mask: url("../icones/video.svg");
}

.SVG_appareil_photo {
  -webkit-mask: url("../icones/appareil_photo.svg");
          mask: url("../icones/appareil_photo.svg");
}

.SVG_eclairages {
  -webkit-mask: url("../icones/eclairages.svg");
          mask: url("../icones/eclairages.svg");
}

.SVG_eclairages_grid {
  -webkit-mask: url("../icones/eclairages_grid.svg");
          mask: url("../icones/eclairages_grid.svg");
}

.SVG_lunettes {
  -webkit-mask: url("../icones/lunettes.svg");
          mask: url("../icones/lunettes.svg");
  -webkit-mask-position: bottom;
          mask-position: bottom;
}

.SVG_stop {
  -webkit-mask: url("../icones/stop.svg");
          mask: url("../icones/stop.svg");
}

.SVG_play {
  -webkit-mask: url("../icones/play.svg");
          mask: url("../icones/play.svg");
}

.SVG_pause {
  -webkit-mask: url("../icones/pause.svg");
          mask: url("../icones/pause.svg");
}

.SVG_FPV {
  -webkit-mask: url("../icones/vue_360.svg");
          mask: url("../icones/vue_360.svg");
}

.SVG_VR {
  -webkit-mask: url("../icones/lunettes_vr.svg");
          mask: url("../icones/lunettes_vr.svg");
}

.SVG_formes {
  -webkit-mask: url("../icones/formes.svg");
          mask: url("../icones/formes.svg");
}

.SVG_percer {
  -webkit-mask: url("../icones/percer.svg");
          mask: url("../icones/percer.svg");
}

.SVG_image {
  -webkit-mask: url("../icones/image.svg");
          mask: url("../icones/image.svg");
}

.SVG_group {
  -webkit-mask: url("../icones/group.svg");
          mask: url("../icones/group.svg");
}

.SVG_ungroup {
  -webkit-mask: url("../icones/ungroup.svg");
          mask: url("../icones/ungroup.svg");
}

.SVG_allumer {
  -webkit-mask: url("../icones/allumer.svg");
          mask: url("../icones/allumer.svg");
}

.SVG_eteindre {
  -webkit-mask: url("../icones/eteindre.svg");
          mask: url("../icones/eteindre.svg");
}

.SVG_poutre {
  -webkit-mask: url("../icones/poutre.svg");
          mask: url("../icones/poutre.svg");
}

.SVG_deco_verandas {
  -webkit-mask: url("../icones/deco_verandas.svg");
          mask: url("../icones/deco_verandas.svg");
}

.SVG_imprimer {
  -webkit-mask: url("../icones/imprimer.svg");
          mask: url("../icones/imprimer.svg");
}

.SVG_ombre {
  -webkit-mask: url("../icones/ombre.svg");
          mask: url("../icones/ombre.svg");
}

.SVG_gomme {
  -webkit-mask: url("../icones/gomme.svg");
          mask: url("../icones/gomme.svg");
}

.SVG_life_ring {
  -webkit-mask: url("../icones/life-ring.svg");
          mask: url("../icones/life-ring.svg");
}

.SVG_dome1 {
  -webkit-mask: url("../icones/dome.svg");
          mask: url("../icones/dome.svg");
}

.SVG_ruler_pencil {
  -webkit-mask: url("../icones/ruler-pencil.svg");
          mask: url("../icones/ruler-pencil.svg");
}

.SVG_cross {
  -webkit-mask: url("../icones/cross.svg");
          mask: url("../icones/cross.svg");
}

.SVG_camera_refresh {
  -webkit-mask: url("../icones/camera-refresh.svg");
          mask: url("../icones/camera-refresh.svg");
}

.SVG_coeur {
  -webkit-mask: url("../icones/heart.svg");
          mask: url("../icones/heart.svg");
}

.SVG_online {
  -webkit-mask: url("../icones/en_ligne.svg");
          mask: url("../icones/en_ligne.svg");
}

.SVG_flecheEclairages {
  -webkit-mask: url("../icones/flecheEclairages.svg");
          mask: url("../icones/flecheEclairages.svg");
}

.SVG_flecheChevrons {
  -webkit-mask: url("../icones/flecheChevrons.svg");
          mask: url("../icones/flecheChevrons.svg");
}

.SVG_selection_rectangle {
  -webkit-mask: url("../icones/selection_rectangle.svg");
          mask: url("../icones/selection_rectangle.svg");
}

.SVG_contact {
  -webkit-mask: url("../icones/contacts.svg");
          mask: url("../icones/contacts.svg");
}

.SVG_envoyer {
  -webkit-mask: url("../icones/envoyer.svg");
          mask: url("../icones/envoyer.svg");
}

.SVG_invitation {
  -webkit-mask: url("../icones/invitation.svg");
          mask: url("../icones/invitation.svg");
}

.SVG_deconnexion {
  -webkit-mask: url("../icones/logout.svg");
          mask: url("../icones/logout.svg");
}

.SVG_other {
  -webkit-mask: url("../icones/other.svg");
          mask: url("../icones/other.svg");
}

.SVG_loupe {
  -webkit-mask: url("../icones/loupe.svg");
          mask: url("../icones/loupe.svg");
}

#topBar {
  display: flex;
  flex-flow: row nowrap;
  width: 100%;
  height: 55px;
  background-color: #64646E;
  border-top: 2px solid #64646E;
}
#topBar > div {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  height: 100%;
}
#topBar > div.ext {
  padding: 0 10px;
}
#topBar > div.ext form > div {
  background-color: #464650;
}
#topBar > div.ext form > div button {
  width: 40px;
  height: 40px;
  padding: 3px;
}
#topBar > div.Side {
  justify-content: space-evenly;
  width: 35%;
  padding: 0 10px;
}
#topBar > div.Center {
  justify-content: space-around;
  width: 30%;
}
#topBar > div.Center #FEN_Toolbar_Vues {
  padding: 0 15px;
  border-radius: 50px;
  background-color: #464650;
}
#topBar > div.Center #FEN_Toolbar_Vues #separation-mode2D {
  margin-top: 5px;
  height: 30px;
}

.InterConceptionRendu {
  z-index: 10;
  width: 300px;
  height: 30px;
  position: absolute;
  bottom: 30px;
  left: calc(50% - 150px);
  border: 2px solid #fff;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #464650;
}
.InterConceptionRendu .content {
  height: 100%;
  width: 255px;
  text-transform: uppercase;
}
.InterConceptionRendu .content form {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.InterConceptionRendu .content form div {
  margin: 0;
  float: left;
}
.InterConceptionRendu .content form label {
  vertical-align: middle;
  line-height: 30px;
  font-size: larger;
  width: 90px;
  text-align: center;
  cursor: pointer;
}
.InterConceptionRendu .content form #TexteConception {
  color: #82EB00;
}
.InterConceptionRendu .content form #TexteRendu {
  color: #00DCFF;
}
.InterConceptionRendu .content form #Div_InterModes {
  margin-top: 4px !important;
}
.InterConceptionRendu .content form #InterModes + label {
  width: 45px;
  height: calc(45px / 2);
  border-radius: calc(45px / 2);
}
.InterConceptionRendu .content form #InterModes + label::before {
  background-color: #82EB00;
  height: calc(45px / 2 - 6px);
  width: calc(45px / 2 - 6px);
}
.InterConceptionRendu .content form #InterModes:checked + label::before {
  background-color: #00DCFF;
  margin-left: calc(45px / 2);
}

form {
  width: 100%;
  height: 100%;
  font-size: 8pt;
  /*& div:has(> *.titre){
    margin-top: $form_margin+15;

      & h5{
        margin:0;
        font-size: $font_fontSize+2;
      }
  }*/
  /*& label:has(+ input[type=checkbox]){
      display: inline;
      margin-right: $form_margin;
  }*/
  /*& div:has(> input[type=number]), & div[data-unite]{
    display: flex;
    align-items: center;

    & > label{
      width:300%;
    }
  }*/
}
form > div {
  margin-top: 9px;
  position: relative;
}
form > div:first-child {
  margin-top: 0;
}
form ::-moz-placeholder {
  color: #adb5bd;
  font-size: 8pt;
}
form ::placeholder {
  color: #adb5bd;
  font-size: 8pt;
}
form :focus-visible, form :focus {
  outline-offset: 0px;
  outline: none;
  box-shadow: 0 0 5px 2px var(--couleurFenetre);
}
form :invalid {
  box-shadow: 0 0 5px 2px #ff364a !important;
}
form [disabled] {
  opacity: 0.5;
}
form .MenuFormulaire {
  width: 50px;
  border-right: 1px solid var(--couleurFenetre);
  margin-right: 10px;
  padding: 0;
  display: flex;
  flex-direction: column;
}
form .MenuFormulaire button {
  width: 45px;
  height: 45px;
  margin-top: 5px;
  margin-bottom: 5px;
}
form .DivParentClassTitre {
  margin-top: 24px;
}
form .DivParentClassTitre h5 {
  margin: 0;
  font-size: 10pt;
  color: var(--couleurFenetre);
}
form .DivParentClassTitre .error {
  display: contents;
}
form fieldset {
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}
form fieldset > div:has(> div.separationVerticale) {
  display: flex;
  flex-direction: row;
}
form fieldset > div:has(> div.separationVerticale) > div.separationVerticale {
  height: auto;
}
form label {
  font-size: 8pt;
  display: block;
  color: #fff;
  width: 100%;
  font-weight: bold;
  padding-bottom: 1px;
}
form input[type=checkbox] {
  display: none;
}
form input[type=checkbox] + label {
  box-sizing: border-box;
  display: inline-block;
  width: 32px;
  height: calc(32px / 2);
  border-radius: calc(32px / 2);
  padding: 3px;
  background-color: #fff;
  transition: all 0.5s;
  vertical-align: middle;
  margin-right: 5px;
}
form input[type=checkbox] + label::before {
  box-sizing: border-box;
  display: block;
  content: "";
  height: calc(32px / 2 - 6px);
  width: calc(32px / 2 - 6px);
  border-radius: 50%;
  background-color: #64646E;
  transition: all 0.5s;
}
form input[type=checkbox]:checked + label::before {
  background-color: var(--couleurFenetre);
}
form input[type=checkbox]:checked + label::before {
  margin-left: calc(32px / 2);
}
form input[type=checkbox] + label:hover {
  cursor: pointer;
}
form input[type=checkbox] ~ .error {
  display: contents;
}
form .DivLabelCheckbox {
  display: inline;
  margin-right: 9px;
}
form select {
  user-drag: none;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -ms-user-drag: none;
  -o-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  box-sizing: border-box;
  width: 100%;
  padding: 6px 5px;
  font-size: 8pt;
  color: #fff;
  border: none;
  border-radius: 5px;
  background: #464650;
  cursor: pointer;
}
form select:focus {
  background: #464650;
}
form select option {
  border: 0;
  width: 100%;
  min-height: 0;
  color: #fff;
  font-size: 8pt;
}
form select:focus > option:checked {
  background: #64646E;
}
form input:not([type=color]), form textarea {
  user-drag: none;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -ms-user-drag: none;
  -o-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  box-sizing: border-box;
  width: 100%;
  padding: 6px 5px;
  font-size: 8pt;
  color: #fff;
  border: none;
  border-radius: 5px;
  background: #464650;
}
form textarea {
  min-width: 100%;
  max-width: 100%;
  min-height: 100px;
  max-height: 500px;
}
form input[type=number]::-webkit-inner-spin-button {
  cursor: pointer;
}
form input[type=search]::-webkit-search-cancel-button {
  opacity: 0;
  pointer-events: none;
}
form div[data-unite]:after {
  content: attr(data-unite);
  position: absolute;
  display: block;
  transform: translate(0, -50%);
  top: 12px;
  pointer-events: none;
  width: 25px;
  text-align: center;
  font-style: normal;
  font-size: 8pt;
  color: #fff;
  right: 20px;
  line-height: 1;
}
form .InputTypeNumberOneLine, form div[data-unite] {
  display: flex;
  align-items: center;
}
form .InputTypeNumberOneLine > label, form div[data-unite] > label {
  width: 300%;
}
form .error {
  visibility: hidden;
  position: absolute;
  bottom: -2px;
  right: 0;
  padding: 2px;
  color: #ff364a;
}
form [aria-invalid=true] {
  margin-bottom: 15px;
}
form [aria-invalid=true] ~ .error {
  visibility: visible;
}
form fieldset[data-typechamp=SELECT] {
  user-drag: none;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -ms-user-drag: none;
  -o-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  display: inherit;
  box-sizing: border-box;
  width: 100%;
  padding: 6px 5px;
  font-size: 8pt;
  color: #fff;
  border: none;
  border-radius: 5px;
}
form fieldset[data-typechamp=SELECT] > input {
  display: none;
}
form fieldset[data-typechamp=SELECT] > label {
  position: relative;
  margin-top: calc(6px * 2);
  margin-bottom: calc(6px * 2 + 5px);
  padding-left: 1.3rem;
}
form fieldset[data-typechamp=SELECT] > label:first-of-type {
  margin-top: 6px;
}
form fieldset[data-typechamp=SELECT] > label:last-child {
  margin-bottom: 6px;
}
form fieldset[data-typechamp=SELECT] > input + label:before, form fieldset[data-typechamp=SELECT] > input + label::after {
  display: block;
  position: absolute;
  box-sizing: border-box;
  content: "";
  border-radius: 1rem;
}
form fieldset[data-typechamp=SELECT] > input + label:before {
  bottom: 0;
  left: 0;
  border: 1px solid #ccc;
  background-color: #eee;
  width: 1rem;
  height: 1rem;
}
form fieldset[data-typechamp=SELECT] > input + label::after {
  bottom: 3px;
  left: 3px;
  width: calc(1rem - 6px);
  height: calc(1rem - 6px);
}
form fieldset[data-typechamp=SELECT] > input:checked + label::after {
  background-color: var(--couleurFenetre);
}
form .RVBPicker {
  user-drag: none;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -ms-user-drag: none;
  -o-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  box-sizing: border-box;
  width: 100%;
  padding: 6px 5px;
  font-size: 8pt;
  color: #fff;
  border: none;
  border-radius: 5px;
}
form .RVBPicker input {
  padding: 0;
  border: none;
  background: none;
  border-radius: 5px;
  width: 46px;
  height: 46px;
  cursor: pointer;
}
form .extPicker {
  user-drag: none;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -ms-user-drag: none;
  -o-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  box-sizing: border-box;
  width: 100%;
  padding: 6px 5px;
  font-size: 8pt;
  color: #fff;
  border: none;
  border-radius: 5px;
  background: #464650;
}
form .extPicker .apercu {
  width: 30px;
  height: 30px;
  float: left;
  border: none;
  border-radius: 5px;
  background: #464650;
  cursor: pointer;
}
form .extPicker .apercu img {
  width: 100%;
  height: 100%;
  border-radius: 5px;
}
form .extPicker .libelle {
  line-height: 30px;
  vertical-align: middle;
  padding-left: 5px;
  cursor: pointer;
}
form .picker {
  position: relative;
  box-sizing: border-box;
  overflow: overlay;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
  width: 100%;
  height: 300px;
  margin-bottom: 5px;
  padding: 8px 5px;
  border-radius: 5px;
  background: #464650;
}
form .picker .card {
  position: relative;
  width: clamp(65px, 25%, 150px);
  height: -moz-fit-content;
  height: fit-content;
  margin-left: 5px;
  margin-right: 5px;
  padding: 8px 4px 5px 4px;
  border-radius: 1px;
}
form .picker .card:hover {
  background-color: #6c757d;
}
form .picker .card:active {
  background-color: #adb5bd;
}
form .picker .card[selected] {
  background-color: #adb5bd;
}
form .picker .card .preview {
  width: 100%;
  height: 0px;
  padding: 50% 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
form .picker .card .name {
  overflow-wrap: break-word;
  margin-top: 4px;
  font-size: 8pt;
  color: #fff;
  text-align: center;
}
form .picker .card .badge {
  transition: display 0.5s ease;
  position: absolute;
  background: var(--couleurFenetre);
  width: 24px;
  height: 24px;
}
form .picker .card .b_HG {
  display: none;
  top: 0;
  left: 0;
}
form .picker .card[data-badge-HG=true] .b_HG {
  display: inherit;
}
form .picker .card .b_HD {
  display: none;
  top: 0;
  right: 0;
}
form .picker .card[data-badge-HD=true] .b_HD {
  display: inherit;
}
form .picker .card .b_BG {
  display: none;
  bottom: 20px;
  left: 0;
}
form .picker .card[data-badge-BG=true] .b_BG {
  display: inherit;
}
form .picker .card .b_BD {
  display: none;
  bottom: 20px;
  right: 0;
}
form .picker .card[data-badge-BD=true] .b_BD {
  display: inherit;
}
form .picker .path {
  width: 100%;
  padding: 1mm 0mm;
  color: #adb5bd;
  text-align: center;
}
form .picker .empty {
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translate(0%, -50%);
  font-size: larger;
  color: #fff;
  text-align: center;
  display: none;
}
form .picker[data-empty=true] .empty {
  display: unset;
}
form .liste {
  position: relative;
  box-sizing: border-box;
  overflow: overlay;
  width: 100%;
  height: 300px;
  margin-bottom: 5px;
  border-radius: 5px;
  background: #464650;
  display: flex;
  flex-direction: column;
}
form .liste .card {
  height: 80px;
  border-radius: 1px;
  display: flex;
  flex-direction: row;
  vertical-align: middle;
  border-bottom: 1px solid #464650;
}
form .liste .card:hover {
  background-color: #6c757d;
}
form .liste .card:active {
  background-color: #adb5bd;
}
form .liste .card[selected] {
  background-color: #adb5bd;
}
form .liste .card .lineID {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 100%;
  background-color: #adb5bd;
  color: #fff;
  margin-right: 10px;
  font-size: 10pt;
}
form .liste .card .preview {
  width: 78px;
  height: 78px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 10px;
}
form .liste .card .name {
  overflow-wrap: break-word;
  font-size: 8pt;
  color: #fff;
  display: flex;
  align-items: center;
}
form .liste .empty {
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translate(0%, -50%);
  font-size: larger;
  color: #fff;
  text-align: center;
  display: none;
}
form .liste[data-empty=true] .empty {
  display: unset;
}
form [data-typechamp=IMAGE] {
  width: 100%;
}
form [data-typechamp=IMAGE][src=""] {
  -webkit-mask: url("../icones/image.svg");
          mask: url("../icones/image.svg");
  background: var(--couleurFenetre);
  width: 100px;
  height: 100px;
}
form .btn {
  background-color: transparent;
  color: #fff;
  border-radius: 7px;
  border: var(--couleurFenetre) solid 2px;
  margin-top: 4.5px;
  transition: all 0.4s ease-out;
  font-size: 8pt;
}
form .btn:hover, form .btn:focus {
  background-color: var(--couleurFenetre);
  color: #fff;
}
form .btn:hover {
  cursor: pointer;
}

input[type=range] {
  -webkit-appearance: none;
  background: inherit;
  margin: 10px 0;
  width: 100%;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  cursor: pointer;
  width: 100%;
  height: 12px;
  background: #464650;
  border-radius: 12px;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  cursor: pointer;
  width: calc(14px * 1.5);
  height: 14px;
  background: var(--couleurFenetre);
  border-radius: 14px;
  margin-top: calc((14px - 12px) / 2 * -1);
}

.boussoleBloc {
  width: 100%;
  height: 135px;
  text-align: center;
  overflow: hidden;
}

.boussole {
  height: 100%;
}

.form-datetime input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: inline-block;
  width: 100%;
  height: 100%;
  left: 0;
  line-height: 1;
  word-break: normal;
  border: 0;
  border-bottom: 1px solid #FF7800;
  background: transparent;
  padding: 0;
  font-size: 13px;
  color: #fff;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~Slider~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.sliderVertical {
  display: flexbox;
  width: 100%;
  height: 5ch;
  padding-bottom: 40px;
  margin-top: 9px;
}

.labelSlider {
  width: 100%;
  display: block;
  text-align: center;
  position: relative;
  top: -6vh;
  font-size: 8pt;
  color: #FF7800;
}

.imgSliderInputVertical {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.imgSliderInputVertical img {
  width: 50%;
  display: flex;
}

.imgSliderInputVertical input {
  width: 50%;
  height: 7.5vh;
  display: flex;
  background: none;
  border: none;
  padding: 0;
  outline: inherit;
  display: block;
  text-align: center;
  font-size: 16pt;
  color: #fff;
  font-weight: 400;
}

.rangeVertical {
  width: 6.5ch;
  height: 100%;
  -webkit-appearance: none;
  background: none;
  margin-left: 37%;
  position: relative;
  top: -6.5vh;
  transform: rotate(-90deg);
}

.rangeVertical::-webkit-slider-thumb {
  -webkit-appearance: none;
  margin-top: 0;
  width: 10%;
  height: 20vh;
  background: #FF7800;
  cursor: ns-resize;
  border: none;
  box-shadow: none;
}

/* SliderHorizontal */
.sliderHorizontal {
  display: flexbox;
  margin-top: 9px;
  padding-bottom: 40px;
  width: 100%;
  height: 7ch;
}

.imgSliderInputHorizontal {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.imgSliderInputHorizontal img {
  width: 65%;
  height: 100%;
  display: flex;
  justify-content: center;
}

.imgSliderInputHorizontal input {
  width: 50%;
  height: 7.5vh;
  display: flex;
  background: none;
  border: none;
  padding: 0;
  outline: inherit;
  display: block;
  text-align: center;
  font-size: 16pt;
  color: #fff;
  font-weight: 400;
}

.rangeHorizontal {
  width: 100%;
  height: 6vh;
  -webkit-appearance: none;
  background: none;
  position: relative;
  top: -7vh;
}

.rangeHorizontal::-webkit-slider-thumb {
  -webkit-appearance: none;
  margin-top: 0;
  width: 2%;
  height: 6vh;
  background: #FF7800;
  cursor: ew-resize;
  border: none;
  box-shadow: none;
}

/* SliderSansNmbr */
.sliderSansNmbr {
  display: flexbox;
  width: 10%;
  height: 7ch;
}

.labelSliderSansNmbr {
  width: 100%;
  display: block;
  text-align: center;
  position: relative;
  top: -6vh;
  font-size: 85%;
  color: #FF7800;
}

.imgSliderInputSansNmbr {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.imgSliderInputSansNmbr img {
  width: 50%;
  display: flex;
  opacity: 15%;
}

.imgSliderInputSansNmbr input {
  width: 50%;
  height: 7.5vh;
  display: flex;
  background: none;
  border: none;
  padding: 0;
  outline: inherit;
  display: block;
  text-align: center;
  font-size: 16pt;
  color: #fff;
  font-weight: 400;
}

.rangeSansNmbr {
  width: 100%;
  height: 6vh;
  -webkit-appearance: none;
  background: none;
  position: relative;
  top: -6vh;
}

.rangeSansNmbr::-webkit-slider-thumb {
  -webkit-appearance: none;
  margin-top: 0;
  width: 2%;
  height: 6vh;
  background: #FF7800;
  cursor: ew-resize;
  border: none;
  box-shadow: none;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~Fin Slider~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#mocha {
  margin: 10px 10px !important;
}

#mocha-stats {
  position: unset !important;
}

#mocha .test a.replay {
  display: none !important;
}

#mocha .test pre {
  overflow: auto !important;
}

#mocha .test.fail, #mocha .test pre.error, #mocha .test.fail::before, #mocha-stats .failures em {
  color: #800 !important;
}

#mocha-stats .passes em {
  color: #00d6b2;
}

#mocha-stats .pending em {
  color: #0b97c4;
}

/* MODALS (les id sont brut) */
#modal_mocha .modal-wrapper {
  width: 40%;
  height: 80%;
}

#modal_mocha .modal-content {
  height: auto;
  overflow: auto;
}

.fenetres {
  width: 410px;
  height: 510px;
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  background-color: #64646E;
  z-index: 20;
}
.fenetres[data-over=true] {
  z-index: 31;
}
.fenetres[data-modal=true] {
  box-shadow: 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12), 0px 5px 5px -3px rgba(0, 0, 0, 0.2);
}
.fenetres .header .bandeau {
  background-color: #464650;
  padding: 0px;
  margin: 0px;
  border: 0px none;
  width: 100%;
  height: 15px;
  background-size: 100% 15px;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
}
.fenetres .header .bandeau .btn-close {
  width: 10px;
  height: 10px;
  border: 0px none;
  -webkit-mask-repeat: no-repeat;
  background: white;
}
.fenetres .header .bandeau .btn-close:not([disabled]):hover {
  background: var(--couleurFenetre);
}
.fenetres .header[data-isClosable=false] .bandeau .btn-close {
  display: none;
}
.fenetres .header .lizere {
  width: 100%;
  height: 2.25px;
  background-color: var(--couleurFenetre);
}
.fenetres .header .title {
  color: var(--couleurFenetre);
  width: 100%;
  text-align: center;
  user-drag: none;
  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  font-size: 10pt;
  text-transform: uppercase;
  margin-top: 5px;
  padding-bottom: 1mm;
}
.fenetres[data-isClosable=false] .header .bandeau .btn-close {
  display: none;
}
.fenetres .content {
  width: 100%;
  height: 100%;
  position: relative;
  box-sizing: border-box;
  padding: 10px;
  overflow: auto;
  overflow-x: hidden;
  display: flex;
}
.fenetres .footer #btnValider {
  margin: 5px;
  position: relative;
  left: 50%;
  transform: translate(-50%, 0);
}

.toolbars {
  width: auto;
  height: auto;
  box-shadow: none !important;
  z-index: 10;
}
.toolbars div.arrow {
  width: 30px;
  height: 30px;
  background: #64646E;
  position: absolute;
  top: 8mm;
}
.toolbars div.arrow.arrow_right {
  left: 8mm;
}
.toolbars div.arrow.arrow_left {
  right: 8mm;
  transform: rotate(180deg);
}
.toolbars .title {
  display: none;
}
.toolbars .content {
  padding: 0;
}
.toolbars .content form > div {
  margin: 0;
  display: flex;
}
.toolbars .content form > div > button {
  margin: calc((42px - 35px) / 2) 4px;
}
.toolbars .content form :focus-visible, .toolbars .content form :focus {
  outline-offset: 0px;
  outline: none;
  box-shadow: none;
}
.toolbars:not([data-attachto]) {
  width: 42px;
}
.toolbars:not([data-attachto]) .content form > div {
  flex-direction: column;
}
.toolbars:not([data-attachto]) .content form > div .separationVerticale {
  display: none;
}
.toolbars:not([data-attachto]) .content form > div:last-child {
  margin-bottom: 5px;
}
.toolbars:not([data-attachto]) .content form > div:last-child .separationHorizontale {
  display: none;
}
.toolbars[data-attachto] {
  position: unset;
  background-color: unset;
}
.toolbars[data-attachto] .header {
  display: none;
}
.toolbars[data-attachto] .content form {
  display: flex;
  flex-direction: row;
}
.toolbars[data-attachto] .content form > div {
  flex-direction: row;
}
.toolbars[data-attachto] .content form > div .separationHorizontale {
  display: none;
}
.toolbars[data-attachto] .content form > div button {
  width: 30px;
  height: 30px;
}
.toolbars[data-attachto] .content form > div:last-child .separationVerticale {
  display: none;
}

.tableauBox {
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: #64646E;
}

table {
  table-layout: fixed;
  width: inherit;
  height: inherit;
  border-collapse: separate;
  border-spacing: 0;
  background-color: #64646E;
  color: #fff;
  -webkit-user-drag: none;
  font-size: 8pt;
}
table caption {
  color: var(--couleurFenetre);
  height: 25px;
  z-index: 2;
  position: sticky;
  top: 0;
  background-color: inherit;
}
table thead {
  color: var(--couleurFenetre);
}
table thead tr:first-child th {
  z-index: 2;
  position: sticky;
  top: 0;
}
table thead th {
  background-color: #464650;
}
table td, table th {
  border-width: 1px;
  border-style: solid;
  border-color: #464650;
}
table tr, table td {
  padding: 15px;
}
table tbody td {
  text-align: center;
}
table tbody[selectableLines=true] tr:hover {
  color: var(--couleurFenetre);
  background-color: #464650;
}
table tbody[selectableLines=true] tr[selected] {
  color: var(--couleurFenetre);
  background-color: #464650;
}

#ToolBar_Content_Text-boutonAnimation {
  display: block;
}

#GuidesIntegrationPhoto .adapt_round {
  position: absolute;
  width: 15px;
  height: 15px;
  border-radius: 50% 50% 50% 50%;
  z-index: 10000;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -ms-user-drag: none;
  -o-user-drag: none;
}
#GuidesIntegrationPhoto .adapt_round:hover {
  cursor: move;
}
#GuidesIntegrationPhoto #adapt_1-1, #GuidesIntegrationPhoto #adapt_1-2, #GuidesIntegrationPhoto #adapt_2-1, #GuidesIntegrationPhoto #adapt_2-2 {
  background-color: #6ec700;
}
#GuidesIntegrationPhoto #adapt_3-1, #GuidesIntegrationPhoto #adapt_3-2, #GuidesIntegrationPhoto #adapt_4-1, #GuidesIntegrationPhoto #adapt_4-2 {
  background: red;
}
#GuidesIntegrationPhoto .diagonale {
  position: absolute;
  z-index: 1000;
}
#GuidesIntegrationPhoto #diagonale_1 {
  --color:#6ec700;
}
#GuidesIntegrationPhoto #diagonale_2 {
  --color:#6ec700;
}
#GuidesIntegrationPhoto #diagonale_3 {
  --color:red;
}
#GuidesIntegrationPhoto #diagonale_4 {
  --color:red;
}
#GuidesIntegrationPhoto .diagonale-to-top {
  background: linear-gradient(to left top, rgba(0, 0, 0, 0) 49%, var(--color) 50%, rgba(0, 0, 0, 0) 49%);
}
#GuidesIntegrationPhoto .diagonale-to-bottom {
  background: linear-gradient(to right top, rgba(0, 0, 0, 0) 49%, var(--color) 50%, rgba(0, 0, 0, 0) 49%);
}

.moov_veranda {
  width: 40px;
  height: 40px;
  z-index: 100000;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -ms-user-drag: none;
  -o-user-drag: none;
  top: 72px;
  left: 0px;
  position: absolute;
  overflow: hidden;
  border: none;
  padding: 0;
  vertical-align: middle;
}
.moov_veranda img {
  padding: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 100%;
     object-position: 100%;
  user-drag: none;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -ms-user-drag: none;
  -o-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
}
.moov_veranda img:hover {
  -o-object-position: 100%;
     object-position: 100%;
}
.moov_veranda .cross {
  width: 35px;
  height: 35px;
  background: #FF7800;
}
.moov_veranda .cross:hover {
  cursor: move;
}
.moov_veranda[data-isPersisted=true] img {
  -o-object-position: 100%;
     object-position: 100%;
}

.contextMenu {
  position: absolute;
  width: 300px;
  max-height: 600px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12), 0px 5px 5px -3px rgba(0, 0, 0, 0.2);
  z-index: 20;
  margin: 0;
  padding: 0;
  padding-top: 6px;
  padding-bottom: 6px;
  outline: none;
  transition: opacity 0.218s;
  overflow: auto;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11pt;
}
.contextMenu hr {
  border: 0;
  border-top: 1px solid #ebebeb;
  margin-top: 6px;
  margin-bottom: 6px;
}
.contextMenu .item {
  padding-left: 48px;
  padding-right: 6px;
  padding-top: 6px;
  padding-bottom: 6px;
  cursor: pointer;
  color: #000;
  position: relative;
}
.contextMenu .item:not([disabled]):hover {
  background-color: #eee;
  color: #000;
}
.contextMenu .item > div {
  display: flex;
  position: relative;
  justify-content: space-between;
  align-items: center;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.contextMenu .item > div .picto {
  height: 20px;
  left: auto;
  position: absolute;
  right: 100%;
  top: auto;
  vertical-align: middle;
  width: 20px;
  margin: 0 12px 0 0;
  background: #000;
}
.contextMenu .item > div .text {
  width: 60%;
}
.contextMenu .item > div .shortcutText {
  width: 30%;
  color: #adb5bd;
}
.contextMenu .item > div .fleche {
  height: 20px;
  width: 20px;
  background: #000;
}
.contextMenu .item:not([disabled])[id=delete]:hover > div .picto {
  background: #ff364a;
}
.contextMenu .item:not([disabled])[id=delete]:hover > div .text {
  color: #ff364a;
}
.contextMenu .item[disabled] {
  color: #eee;
}
.contextMenu .item[disabled] > div .picto {
  background: #eee;
}
.contextMenu .item[disabled] > div .shortcutText {
  color: #eee;
}
.contextMenu .item[disabled] > div .fleche {
  background: #eee;
}

#groupebtnsvgintegrationPhoto div {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

#FEN_ToitureVeranda {
  --couleurFenetre: #82EB00;
  width: 575px;
  height: 400px;
}
#FEN_ToitureVeranda #Div_ImageToiture {
  position: absolute;
  left: 0px;
}
#FEN_ToitureVeranda #Div_ImageToiture img {
  width: 35%;
}
#FEN_ToitureVeranda #Div_ListeTypesToitures {
  position: absolute;
  width: 280px;
  left: 250px;
}
#FEN_ToitureVeranda #Div_ListeRemplissagesToitures {
  position: absolute;
  width: 280px;
  left: 250px;
  top: 75px;
}
#FEN_ToitureVeranda #Div_LargeurDisponible {
  position: absolute;
  width: 350px;
  left: 37px;
  top: 150px;
}
#FEN_ToitureVeranda #Div_NbChevrons {
  position: absolute;
  width: 50px;
  top: 205px;
  left: 282px;
}
#FEN_ToitureVeranda #Div_LargeurTravee {
  position: absolute;
  width: 85px;
  top: 237px;
  left: 191px;
}
#FEN_ToitureVeranda #Div_LargeurTravee i {
  padding-right: 140px;
  width: 20px;
}
#FEN_ToitureVeranda #Div_LargeurTravee2 {
  position: absolute;
  top: 268px;
  left: 134px;
}
#FEN_ToitureVeranda #Div_LargeurTravee2 Label {
  width: 97px;
}
#FEN_ToitureVeranda #Div_LargeurTravee2 #LargeurTravee2 {
  width: 90px;
}
#FEN_ToitureVeranda #Div_NbTravees {
  position: absolute;
  width: 39px;
  top: 236px;
  left: 218px;
}
#FEN_ToitureVeranda #Div_NbTravees2 {
  position: absolute;
  width: 50px;
  top: 268px;
  left: 78px;
}
#FEN_ToitureVeranda #Div_SelecteurToitureSoleil {
  position: absolute;
  width: 520px;
  height: auto;
  top: 200px;
}
#FEN_ToitureVeranda #Div_SelecteurToiture {
  position: absolute;
  width: 520px;
  height: 100px;
  top: 200px;
}

#FEN_MursPergola {
  --couleurFenetre: #82EB00;
  width: 600px;
  height: 600px;
}
#FEN_MursPergola .content form #Div_ImageMur {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#FEN_MursPergola .content form #Div_ListeMurArriere {
  position: absolute;
  width: 100px;
  left: 50%;
  transform: translate(-50%, 0);
  top: 10px;
}
#FEN_MursPergola .content form #Div_DistanceGaucheMurArriere {
  position: absolute;
  width: 90px;
  top: 60px;
  left: 167px;
}
#FEN_MursPergola .content form #Div_DistanceDroiteMurArriere {
  position: absolute;
  width: 90px;
  top: 60px;
  right: 146px;
}
#FEN_MursPergola .content form #Div_ImageMurArriere, #FEN_MursPergola .content form #Div_ImageMurArriere2 {
  position: absolute;
  top: 98px;
  left: 50%;
  transform: translate(-50%, 0);
}
#FEN_MursPergola .content form #Div_ImageFlecheArriereG {
  position: absolute;
  top: 98px;
  left: 170px;
}
#FEN_MursPergola .content form #Div_ImageFlecheArriereD {
  position: absolute;
  top: 98px;
  right: 170px;
}
#FEN_MursPergola .content form #Div_ListeMurAvant {
  position: absolute;
  width: 100px;
  left: 50%;
  transform: translate(-50%, 0);
  bottom: 30px;
}
#FEN_MursPergola .content form #Div_DistanceGaucheMurAvant {
  position: absolute;
  width: 90px;
  bottom: 75px;
  left: 167px;
}
#FEN_MursPergola .content form #Div_DistanceDroiteMurAvant {
  position: absolute;
  width: 90px;
  bottom: 75px;
  right: 146px;
}
#FEN_MursPergola .content form #Div_ImageMurAvant, #FEN_MursPergola .content form #Div_ImageMurAvant2 {
  position: absolute;
  bottom: 110px;
  left: 50%;
  transform: translate(-50%, 0);
}
#FEN_MursPergola .content form #Div_ImageFlecheAvantG {
  position: absolute;
  bottom: 110px;
  left: 170px;
}
#FEN_MursPergola .content form #Div_ImageFlecheAvantD {
  position: absolute;
  bottom: 110px;
  right: 170px;
}
#FEN_MursPergola .content form #Div_ListeMurGauche {
  position: absolute;
  width: 100px;
  top: 50%;
  transform: translate(0, -50%);
  left: 10px;
}
#FEN_MursPergola .content form #Div_DistanceGaucheMurGauche {
  position: absolute;
  width: 90px;
  top: 136px;
  left: 60px;
}
#FEN_MursPergola .content form #Div_DistanceDroiteMurGauche {
  position: absolute;
  width: 90px;
  bottom: 152px;
  left: 60px;
}
#FEN_MursPergola .content form #Div_ImageMurGauche, #FEN_MursPergola .content form #Div_ImageMurGauche2 {
  position: absolute;
  left: 154px;
  top: 50%;
  margin-top: 0px;
  transform: translate(0, -50%);
}
#FEN_MursPergola .content form #Div_ImageFlecheGaucheG {
  position: absolute;
  top: 115px;
  left: 153px;
}
#FEN_MursPergola .content form #Div_ImageFlecheGaucheD {
  position: absolute;
  bottom: 129px;
  left: 153px;
}
#FEN_MursPergola .content form #Div_ListeMurDroite {
  position: absolute;
  width: 100px;
  top: 50%;
  transform: translate(0, -50%);
  right: 10px;
}
#FEN_MursPergola .content form #Div_DistanceGaucheMurDroite {
  position: absolute;
  width: 90px;
  top: 136px;
  right: 59px;
}
#FEN_MursPergola .content form #Div_DistanceDroiteMurDroite {
  position: absolute;
  width: 90px;
  bottom: 152px;
  right: 59px;
}
#FEN_MursPergola .content form #Div_ImageMurDroite, #FEN_MursPergola .content form #Div_ImageMurDroite2 {
  position: absolute;
  right: 154px;
  top: 50%;
  margin-top: 0px;
  transform: translate(0, -50%);
}
#FEN_MursPergola .content form #Div_ImageFlecheDroiteG {
  position: absolute;
  top: 115px;
  right: 153px;
}
#FEN_MursPergola .content form #Div_ImageFlecheDroiteD {
  position: absolute;
  bottom: 129px;
  right: 153px;
}
#FEN_MursPergola .content form #Div_PoteauARG {
  position: absolute;
  top: 30px;
  left: 10px;
}
#FEN_MursPergola .content form #Div_PoteauARD {
  position: absolute;
  top: 30px;
  right: 10px;
}
#FEN_MursPergola .content form #Div_PoteauAVG {
  position: absolute;
  bottom: 30px;
  left: 10px;
}
#FEN_MursPergola .content form #Div_PoteauAVD {
  position: absolute;
  bottom: 30px;
  right: 10px;
}

#FEN_CalculPourcentage {
  --couleurFenetre: #82EB00;
  width: 280px;
  height: 130px;
}
#FEN_CalculPourcentage .content form #Div_Liste {
  position: absolute;
  width: 150px;
  left: 120px;
}
#FEN_CalculPourcentage .content form #Div_Liste label {
  position: absolute;
  top: 50%;
  width: 80px;
  left: -50px;
  transform: translate(0, -50%);
}
#FEN_CalculPourcentage .content form #Div_Liste Liste {
  position: absolute;
  left: 200px;
}
#FEN_CalculPourcentage .content form #Div_Pourcentage {
  position: absolute;
  width: 50px;
  margin-top: 0px;
}
#FEN_CalculPourcentage .content form #btnSave {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translate(-50%, -50%);
}

#FEN_OptionsComposant {
  --couleurFenetre: #FF7800;
  width: 350px;
  height: 700px;
}
#FEN_OptionsComposant .content form #Div_Palmette #Palmette {
  height: 150px;
}
#FEN_OptionsComposant .content form #Div_Forme_PB #Forme_PB {
  height: 150px;
}

#FEN_BoutonsStructures {
  --couleurFenetre: #82EB00;
  width: 100px;
  height: auto;
  max-height: 500px;
}
#FEN_BoutonsStructures .content form div {
  display: flex;
  align-items: center;
  justify-content: center;
}

#FEN_BoutonsChassis {
  --couleurFenetre: #82EB00;
  width: 250px;
  height: 300px;
}
#FEN_BoutonsChassis .content {
  padding: 5px;
}
#FEN_BoutonsChassis .content form {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  max-height: calc(50px * 5 + 50px + 20px);
}
#FEN_BoutonsChassis .content form div {
  margin: 5px;
  width: -moz-fit-content;
  width: fit-content;
}

#FEN_BoutonsOptions_Toiture {
  --couleurFenetre: #82EB00;
  width: 250px;
  height: 300px;
}
#FEN_BoutonsOptions_Toiture .content {
  padding: 5px;
}
#FEN_BoutonsOptions_Toiture .content form {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  max-height: calc(50px * 5 + 50px + 20px);
}
#FEN_BoutonsOptions_Toiture .content form div {
  margin: 5px;
  width: -moz-fit-content;
  width: fit-content;
}

#FEN_Couleurs {
  --couleurFenetre: #82EB00;
  width: 300px;
  height: 400px;
}

#FEN_IntegrationPhoto {
  --couleurFenetre: #00DCFF;
  width: 350px;
  height: -moz-min-content;
  height: min-content;
}

#FEN_Environnement {
  --couleurFenetre: #00DCFF;
  width: 300px;
  height: 570px;
}
#FEN_Environnement .content form #Div_BoutonPlay {
  position: absolute;
  top: 137px;
  left: 193px;
}
#FEN_Environnement .content form #Div_BoutonStop {
  position: absolute;
  top: 137px;
  left: 233px;
}

#FEN_ExplorerPicker {
  width: 400px;
  height: 600px;
}
#FEN_ExplorerPicker .content form {
  position: relative;
}
#FEN_ExplorerPicker .content form .picker {
  height: 410px;
}
#FEN_ExplorerPicker .content form fieldset:nth-child(1) {
  /*  
      >div:has(>input[type="checkbox"]) {
      align-self: baseline;
      >label {
          margin-right: 0px
          }
      }
  */
}
#FEN_ExplorerPicker .content form fieldset:nth-child(1) button {
  width: 32px;
  height: 32px;
}
#FEN_ExplorerPicker .content form fieldset:nth-child(1) > div:not(input[type=search]) {
  text-align: center;
}
#FEN_ExplorerPicker .content form fieldset:nth-child(1) .DivParentInputSearch {
  width: 100%;
  padding-right: 2mm;
}
#FEN_ExplorerPicker .content form fieldset:nth-child(1) #Div_offlineButtonn > input[type=checkbox] {
  align-self: baseline;
}
#FEN_ExplorerPicker .content form fieldset:nth-child(1) #Div_offlineButtonn > label {
  margin-right: 0px;
}
#FEN_ExplorerPicker .content form fieldset:nth-child(1) ~ fieldset {
  margin-top: 3mm;
}
#FEN_ExplorerPicker .content form fieldset:nth-child(1) ~ fieldset button {
  width: 30px;
  height: 30px;
}
#FEN_ExplorerPicker .content form fieldset:nth-child(1) ~ fieldset .separationVerticale {
  margin-left: 6px;
  margin-right: 6px;
}
#FEN_ExplorerPicker[data-openBy=FEN_OptionsComposant] {
  --couleurFenetre: #FF7800;
}
#FEN_ExplorerPicker[data-openBy=FEN_Projets] {
  --couleurFenetre: #82EB00;
}

#FEN_Picker {
  width: 375px;
  height: 500px;
}
#FEN_Picker[data-openBy=FEN_OptionsComposant] {
  --couleurFenetre: #FF7800;
}
#FEN_Picker[data-openBy=FEN_Projets] {
  --couleurFenetre: #82EB00;
}

#FEN_Positionnement_Objets {
  --couleurFenetre: #FF7800;
  width: 350px;
  height: 350px;
}
#FEN_Positionnement_Objets .content form #Div_ImageAxeX {
  top: 30px;
  left: 175px;
  position: absolute;
}
#FEN_Positionnement_Objets .content form #Div_ImageAxeY {
  top: 63px;
  left: 175px;
  position: absolute;
}
#FEN_Positionnement_Objets .content form #Div_ImageAxeZ {
  top: 94px;
  left: 175px;
  position: absolute;
}
#FEN_Positionnement_Objets .content form #Div_ImageAxeX2 {
  top: 166px;
  left: 175px;
  position: absolute;
}
#FEN_Positionnement_Objets .content form #Div_ImageAxeY2 {
  top: 198px;
  left: 175px;
  position: absolute;
}
#FEN_Positionnement_Objets .content form #Div_ImageAxeZ2 {
  top: 230px;
  left: 175px;
  position: absolute;
}

#FEN_ObjetsSupplementaires {
  --couleurFenetre: #82EB00;
  width: 400px;
  height: 550px;
}
#FEN_ObjetsSupplementaires .content form {
  position: relative;
}
#FEN_ObjetsSupplementaires .content form .picker {
  height: 410px;
}
#FEN_ObjetsSupplementaires .content form fieldset:nth-child(1) {
  /*>div:has(>input[type="search"]) {
      width: 100%;
      padding-right: 2mm;
  }

  >div:has(>input[type="checkbox"]) {
      align-self: baseline;

      >label {
          margin-right: 0px
      }
  } */
}
#FEN_ObjetsSupplementaires .content form fieldset:nth-child(1) button {
  width: 32px;
  height: 32px;
}
#FEN_ObjetsSupplementaires .content form fieldset:nth-child(1) > div:not(input[type=search]) {
  text-align: center;
}
#FEN_ObjetsSupplementaires .content form fieldset:nth-child(1) .DivParentInputSearch {
  width: 100%;
  padding-right: 2mm;
}
#FEN_ObjetsSupplementaires .content form fieldset:nth-child(1) #Div_offlineButton > input[type=checkbox] {
  align-self: baseline;
}
#FEN_ObjetsSupplementaires .content form fieldset:nth-child(1) #Div_offlineButton > label {
  margin-right: 0px;
}
#FEN_ObjetsSupplementaires .content form fieldset:nth-child(1) ~ fieldset {
  margin-top: 3mm;
}
#FEN_ObjetsSupplementaires .content form fieldset:nth-child(1) ~ fieldset button {
  width: 30px;
  height: 30px;
}
#FEN_ObjetsSupplementaires .content form fieldset:nth-child(1) ~ fieldset .separationVerticale {
  margin-left: 6px;
  margin-right: 6px;
}
#FEN_ObjetsSupplementaires .content form #Paint_Tools {
  position: absolute;
  background: #64646E;
  bottom: calc(35px + 3px);
  padding-top: 12px;
  /* display: none;*/
}

#FEN_Projets {
  --couleurFenetre: #82EB00;
  width: 610px;
  height: 712px;
}
#FEN_Projets .content {
  margin: 0;
  overflow: hidden;
}
#FEN_Projets .content form {
  top: 10px;
  position: absolute;
  left: 10px;
  width: 250px;
  background-color: #C8C8C8;
  border-radius: 5px;
}
#FEN_Projets .content form Label {
  color: #464650;
}
#FEN_Projets .content form #Div_ListeFournisseurs {
  left: 5px;
  width: 240px;
  top: 5px;
}
#FEN_Projets .content form #Div_ListeGammes {
  width: 240px;
  left: 5px;
}
#FEN_Projets .content form #Div_ListeTypesProjets {
  width: 240px;
  left: 5px;
}
#FEN_Projets .content form #Div_ListeProjets {
  width: 240px;
  left: 5px;
}
#FEN_Projets .content form #Div_ListeProjets .card {
  width: 140px;
}
#FEN_Projets .content form #Div_ListeProjets .picker {
  height: 475px;
}
#FEN_Projets .content form #Div_ListeUnites {
  width: 270px;
  left: 5px;
  top: 5px;
  margin-bottom: 20px;
}
#FEN_Projets .content form #Div_ListeUnites #ListeUnites {
  position: absolute;
  left: 190px;
  top: -6px;
  width: 50px;
}
#FEN_Projets #Form_FEN_Projets {
  height: -moz-fit-content;
  height: fit-content;
}
#FEN_Projets #Form_variables_FEN_Projets {
  position: absolute;
  width: 310px;
  height: 96%;
  left: 280px;
  top: 15px;
  padding: 0 10px 7px 5px;
  overflow: auto;
  background-color: transparent;
}
#FEN_Projets #Form_variables_FEN_Projets Label {
  color: #fff;
}

#FEN_DecalagePergola {
  --couleurFenetre: #82EB00;
  width: 450px;
  height: 550px;
}
#FEN_DecalagePergola .content form #Div_ImagePergola {
  position: absolute;
  top: 40%;
  left: 30%;
  transform: translate(-15%, -35%);
  background-color: white;
}
#FEN_DecalagePergola .content form #Div_ImagePergola img {
  width: 70%;
}
#FEN_DecalagePergola .content form #Div_ImagePergola img[src="img/interface/DecalagePergolaGD.png"] {
  width: 100%;
}
#FEN_DecalagePergola .content form #Div_ListeTypePositionnement {
  width: 200px;
  top: 5px;
}
#FEN_DecalagePergola .content form #Div_ListePositionnement {
  width: 280px;
  top: 330px;
}
#FEN_DecalagePergola .content form #Div_Decalage {
  width: 100px;
  top: 298px;
  left: 300px;
}
#FEN_DecalagePergola .content form #Div_DoublagePoteau {
  top: 320px;
}

#FEN_Apercu {
  --couleurFenetre: #FF7800;
  width: 410px;
  height: 450px;
}

#FEN_ParametrageUnites {
  --couleurFenetre: #FF7800;
  width: 350px;
  height: 500px;
}
#FEN_ParametrageUnites .content form input[type=range] {
  width: 150px;
  margin: 0;
}
#FEN_ParametrageUnites .content form select {
  width: 150px;
}
#FEN_ParametrageUnites .content form fieldset {
  margin-top: 9px;
}

#FEN_Chassis {
  --couleurFenetre: #82EB00;
  width: 400px;
  height: 700px;
}
#FEN_Chassis .content form#Form_variables_FEN_Chassis {
  height: 330px;
  position: absolute;
  top: 280px;
  width: 350px;
  overflow: auto;
  padding-right: 10px;
  padding-left: 5px;
}
#FEN_Chassis .content form#Form_variables_FEN_Chassis #Div_EntraxeDecor {
  top: 50px;
}
#FEN_Chassis .content form#Form_variables_FEN_Chassis #Div_TypeBardage {
  top: 45px;
}
#FEN_Chassis .content form#Form_variables_FEN_Chassis #Div_couleurlames2 {
  top: 45px;
}
#FEN_Chassis .content form#Form_variables_FEN_Chassis #Div_TypeCapot {
  top: 45px;
}
#FEN_Chassis .content form#Form_FEN_Chassis.avecListeReferencesProduits + #Form_variables_FEN_Chassis {
  top: 310px;
  height: 304px;
}
#FEN_Chassis .content form #Div_Image {
  position: absolute;
  width: 45%;
  left: -5px;
  top: -5px;
}
#FEN_Chassis .content form #Div_LenX {
  position: absolute;
  width: 150px;
  left: 225px;
  top: 30px;
}
#FEN_Chassis .content form #Div_LenX #LenX {
  width: 90px;
}
#FEN_Chassis .content form #BoutonLenX {
  position: absolute;
  left: 180px;
  top: 40px;
}
#FEN_Chassis .content form #BoutonLenY {
  position: absolute;
  left: 180px;
  top: 80px;
}
#FEN_Chassis .content form #Div_LenY {
  position: absolute;
  width: 150px;
  left: 225px;
  top: 70px;
}
#FEN_Chassis .content form #Div_LenY #LenY {
  width: 90px;
}
#FEN_Chassis .content form #Div_LibelleCaracteristiques {
  position: absolute;
  top: 225px;
}
#FEN_Chassis .content form #Div_ListeReferencesProduits {
  position: absolute;
  top: 225px;
  width: 380px;
}
#FEN_Chassis .content form #Div_ListeReferencesProduits #ListeReferencesProduits {
  position: absolute;
  width: 250px;
  left: 130px;
  top: 13px;
}
#FEN_Chassis .content form #Div_ListeReferencesProduits Label {
  top: 20px;
  position: absolute;
}
#FEN_Chassis .content form #Div_ListeReferencesProduits ~ #Div_LibelleCaracteristiques {
  top: 260px;
}
#FEN_Chassis .content form #Div_SelectCoteAjout {
  position: absolute;
  top: 168px;
}
#FEN_Chassis .content form #Div_SelectPositionTrapeze {
  position: absolute;
  left: 170px;
  top: 107px;
}
#FEN_Chassis .content form #Div_SelectPositionChassis {
  position: absolute;
  left: 170px;
  top: 168px;
}
#FEN_Chassis .content form #Div_Altitude {
  position: absolute;
  width: 150px;
  left: 285px;
  top: 173px;
}
#FEN_Chassis .content form #Div_Altitude #Altitude {
  width: 90px;
}
#FEN_Chassis .content form #Div_SousCheneau {
  position: absolute;
  left: 220px;
  top: 143px;
}
#FEN_Chassis .content form #Div_LibelleDimensions {
  position: absolute;
  top: -10px;
  left: 180px;
}
#FEN_Chassis .content form #Div_LibellePositionnement {
  position: absolute;
  top: 100px;
}
#FEN_Chassis .content form #Div_ListeFacades {
  position: absolute;
  top: 125px;
  width: 100px;
}
#FEN_Chassis .content form #Div_ListeFacades #ListeFacades {
  position: absolute;
  width: 80px;
  left: 105px;
  top: 13px;
}
#FEN_Chassis .content form #Div_ListeFacades Label {
  top: 20px;
  position: absolute;
}

#FEN_Options_Toiture {
  --couleurFenetre: #82EB00;
  width: 400px;
  height: 700px;
}
#FEN_Options_Toiture .content form#Form_variables_FEN_Options_Toiture {
  height: 360px;
  position: absolute;
  top: 205px;
  width: 350px;
  overflow: auto;
  padding-right: 10px;
  padding-left: 5px;
}
#FEN_Options_Toiture .content form#Form_variables_FEN_Options_Toiture #Div_EntraxeDecor {
  top: 50px;
}
#FEN_Options_Toiture .content form#Form_variables_FEN_Options_Toiture #Div_TypeBardage {
  top: 45px;
}
#FEN_Options_Toiture .content form#Form_variables_FEN_Options_Toiture #Div_couleurlames2 {
  top: 45px;
}
#FEN_Options_Toiture .content form#Form_variables_FEN_Options_Toiture #Div_TypeCapot {
  top: 45px;
}
#FEN_Options_Toiture .content form#Form_FEN_Options_Toiture.avecListeReferencesProduits + #Form_variables_FEN_Options_Toiture {
  top: 310px;
  height: 304px;
}
#FEN_Options_Toiture .content form #Div_Image {
  position: absolute;
  width: 45%;
  left: -5px;
  top: 10px;
}
#FEN_Options_Toiture .content form #Div_LenX {
  position: absolute;
  width: 150px;
  left: 225px;
  top: 30px;
}
#FEN_Options_Toiture .content form #Div_LenX #LenX {
  width: 90px;
}
#FEN_Options_Toiture .content form #Div_LenY {
  position: absolute;
  width: 150px;
  left: 225px;
  top: 70px;
}
#FEN_Options_Toiture .content form #Div_LenY #LenY {
  width: 90px;
}
#FEN_Options_Toiture .content form #Div_LibelleCaracteristiques {
  position: absolute;
  top: 150px;
}
#FEN_Options_Toiture .content form #Div_ListeReferencesProduits {
  position: absolute;
  top: 150px;
  width: 380px;
}
#FEN_Options_Toiture .content form #Div_ListeReferencesProduits #ListeReferencesProduits {
  position: absolute;
  width: 250px;
  left: 130px;
  top: 13px;
}
#FEN_Options_Toiture .content form #Div_ListeReferencesProduits Label {
  top: 20px;
  position: absolute;
}
#FEN_Options_Toiture .content form #Div_ListeReferencesProduits ~ #Div_LibelleCaracteristiques {
  top: 185px;
}
#FEN_Options_Toiture .content form #Div_LibelleDimensions {
  position: absolute;
  top: -10px;
  left: 180px;
}

/*#FEN_Surelever{
    width: 250px;
    height:127px;

    .lizere{background-color: $colorConception;}
    .title{color: $colorConception;}
}*/
#FEN_Surelever {
  --couleurFenetre: #82EB00;
  width: 250px;
  height: 127px;
}

#FEN_Surelever input {
  width: 80px;
}

#FEN_Surelever form div[data-unite]:after {
  width: 23px;
}

#FEN_Poteaux {
  --couleurFenetre: #82EB00;
  width: 500px;
  height: 600px;
}
#FEN_Poteaux .content form #Div_Image {
  position: absolute;
  width: 45%;
  left: 285px;
  top: 50px;
}
#FEN_Poteaux .content form #Div_CBPoteaux {
  position: absolute;
  width: 300px;
}
#FEN_Poteaux .content form #Div_LibelleDisposition {
  position: absolute;
  top: 110px;
}
#FEN_Poteaux .content form #Div_SelectDisposition {
  position: absolute;
  top: 140px;
}
#FEN_Poteaux .content form #SelectDisposition > label {
  position: relative;
  margin-top: 12px;
  margin-bottom: 32px;
  padding-left: 1.3rem;
}
#FEN_Poteaux .content form #Div_LargeurDisponible {
  position: absolute;
  width: 220px;
  left: 10px;
  top: 90px;
}
#FEN_Poteaux .content form #Div_LargeurDisponible #LargeurDisponible {
  width: 90px;
}
#FEN_Poteaux .content form #Div_NbPoteaux {
  position: absolute;
  top: 196px;
  width: 40px;
  left: 82px;
}
#FEN_Poteaux .content form #Div_LargeurPassage {
  position: absolute;
  width: 100px;
  left: 200px;
  top: 242px;
}
#FEN_Poteaux .content form #Div_LargeurPassage #LargeurPassage {
  width: 90px;
}
#FEN_Poteaux .content form #Div_Distance1 {
  width: 265px;
  top: 310px;
  left: 45px;
  position: absolute;
}
#FEN_Poteaux .content form #Div_Libelle1 {
  position: absolute;
  left: 320px;
  top: 290px;
  color: white;
}
#FEN_Poteaux .content form #Div_Distance2 {
  width: 265px;
  top: 350px;
  left: 45px;
  position: absolute;
}
#FEN_Poteaux .content form #Div_Libelle2 {
  position: absolute;
  left: 320px;
  top: 330px;
  color: white;
}
#FEN_Poteaux .content form #Div_Distance3 {
  width: 265px;
  top: 390px;
  left: 45px;
  position: absolute;
}
#FEN_Poteaux .content form #Div_Libelle3 {
  position: absolute;
  left: 320px;
  top: 370px;
  color: white;
}
#FEN_Poteaux .content form #Div_Distance4 {
  width: 265px;
  top: 430px;
  left: 45px;
  position: absolute;
}
#FEN_Poteaux .content form #Div_Libelle4 {
  position: absolute;
  left: 320px;
  top: 410px;
  color: white;
}
#FEN_Poteaux .content form #Div_Distance5 {
  width: 265px;
  top: 470px;
  left: 45px;
  position: absolute;
}
#FEN_Poteaux .content form #Div_Libelle5 {
  position: absolute;
  left: 320px;
  top: 450px;
  color: white;
}
#FEN_Poteaux .content form #Div_ListeFacades {
  position: absolute;
  left: 10px;
  top: 45px;
  width: 100px;
}
#FEN_Poteaux .content form #Div_ListeFacades #ListeFacades {
  position: absolute;
  width: 80px;
  left: 105px;
  top: 13px;
}
#FEN_Poteaux .content form #Div_ListeFacades Label {
  top: 20px;
  position: absolute;
}

#FEN_Eclairages {
  --couleurFenetre: #00DCFF;
  width: 300px;
  height: 550px;
}
#FEN_Eclairages .content form #Div_LibelleZone1 {
  position: absolute;
  top: 170px;
}
#FEN_Eclairages .content form #Div_InterZone1 {
  position: absolute;
  top: 210px;
  left: 50px;
}
#FEN_Eclairages .content form #Div_RVBZone1 {
  position: absolute;
  left: 240px;
  top: 180px;
}
#FEN_Eclairages .content form #Div_LibelleZone2 {
  position: absolute;
  top: 235px;
}
#FEN_Eclairages .content form #Div_InterZone2 {
  position: absolute;
  top: 275px;
  left: 50px;
}
#FEN_Eclairages .content form #Div_RVBZone2 {
  position: absolute;
  left: 240px;
  top: 255px;
}
#FEN_Eclairages .content form #Div_LibelleZone3 {
  position: absolute;
  top: 310px;
}
#FEN_Eclairages .content form #Div_InterZone3 {
  position: absolute;
  top: 350px;
  left: 50px;
}
#FEN_Eclairages .content form #Div_RVBZone3 {
  position: absolute;
  left: 240px;
  top: 330px;
}
#FEN_Eclairages .content form #Div_LibelleZone4 {
  position: absolute;
  top: 385px;
}
#FEN_Eclairages .content form #Div_InterZone4 {
  position: absolute;
  top: 425px;
  left: 50px;
}
#FEN_Eclairages .content form #Div_RVBZone4 {
  position: absolute;
  left: 240px;
  top: 405px;
}
#FEN_Eclairages .content form #Div_BTNAllumeSelection {
  position: absolute;
  left: 80px;
  top: 390px;
}
#FEN_Eclairages .content form #Div_BTNEteintSelection {
  position: absolute;
  left: 150px;
  top: 390px;
}
#FEN_Eclairages .content form #Div_RVBSelection {
  position: absolute;
  left: 240px;
  top: 380px;
}

#FEN_Contraintes {
  --couleurFenetre: #FF7800;
  width: 450px;
  height: 750px;
}
#FEN_Contraintes .content form {
  height: 95%;
}
#FEN_Contraintes .content form .tableauBox {
  height: 88%;
}
#FEN_Contraintes .content form #Div_Observations {
  bottom: 70px;
  position: absolute;
  width: 96%;
}
#FEN_Contraintes .content form #Div_Observations #Observations {
  height: 100px;
}
#FEN_Contraintes .content form #Div_boutonValidation {
  bottom: 15px;
  position: absolute;
}
#FEN_Contraintes .content form #Div_boutonTarif {
  bottom: 15px;
  right: 10px;
  position: absolute;
}

#FEN_Dank {
  --couleurFenetre: #82EB00;
}

#FEN_Liste_Toolbars {
  --couleurFenetre: #FF7800;
  width: 250px;
  height: 400px;
}

#FEN_Animations {
  --couleurFenetre: #00DCFF;
  width: 250px;
  height: 200px;
}

#FEN_Password {
  --couleurFenetre:#FF7800;
  width: 300px;
  height: 150px;
}

#FEN_Saisie_Libelle {
  --couleurFenetre:#FF7800;
  width: 300px;
  height: 150px;
}
#FEN_Saisie_Libelle #Div_Submit {
  text-align: center;
}

#FEN_Saisie_Password {
  --couleurFenetre:#FF7800;
  width: 300px;
  height: 150px;
}
#FEN_Saisie_Password #Div_Submit {
  text-align: center;
}

#FEN_Vues {
  --couleurFenetre: #FF7800;
  width: 320px;
  height: 500px;
}
#FEN_Vues .tableauBox {
  height: 400px;
  overflow: overlay;
}

#FEN_Pin, #FEN_Formes {
  --couleurFenetre: #82EB00;
  width: 400px;
  height: 550px;
}
#FEN_Pin .content form, #FEN_Formes .content form {
  position: relative;
}
#FEN_Pin .content form .picker, #FEN_Formes .content form .picker {
  height: 410px;
}
#FEN_Pin .content form fieldset:nth-child(1), #FEN_Formes .content form fieldset:nth-child(1) {
  /*>div:has(>input[type="search"]) {
      width: 100%;
      padding-right: 2mm;
  }

  >div:has(>input[type="checkbox"]) {
      align-self: baseline;

      >label {
          margin-right: 0px
      }
  } */
}
#FEN_Pin .content form fieldset:nth-child(1) button, #FEN_Formes .content form fieldset:nth-child(1) button {
  width: 32px;
  height: 32px;
}
#FEN_Pin .content form fieldset:nth-child(1) > div:not(input[type=search]), #FEN_Formes .content form fieldset:nth-child(1) > div:not(input[type=search]) {
  text-align: center;
}
#FEN_Pin .content form fieldset:nth-child(1) .DivParentInputSearch, #FEN_Formes .content form fieldset:nth-child(1) .DivParentInputSearch {
  width: 100%;
  padding-right: 2mm;
}
#FEN_Pin .content form fieldset:nth-child(1) #Div_offlineButton > input[type=checkbox], #FEN_Formes .content form fieldset:nth-child(1) #Div_offlineButton > input[type=checkbox] {
  align-self: baseline;
}
#FEN_Pin .content form fieldset:nth-child(1) #Div_offlineButton > label, #FEN_Formes .content form fieldset:nth-child(1) #Div_offlineButton > label {
  margin-right: 0px;
}
#FEN_Pin .content form fieldset:nth-child(1) ~ fieldset, #FEN_Formes .content form fieldset:nth-child(1) ~ fieldset {
  margin-top: 3mm;
}
#FEN_Pin .content form fieldset:nth-child(1) ~ fieldset button, #FEN_Formes .content form fieldset:nth-child(1) ~ fieldset button {
  width: 30px;
  height: 30px;
}
#FEN_Pin .content form fieldset:nth-child(1) ~ fieldset .separationVerticale, #FEN_Formes .content form fieldset:nth-child(1) ~ fieldset .separationVerticale {
  margin-left: 6px;
  margin-right: 6px;
}

#FEN_Gestion_Ground {
  --couleurFenetre: #82EB00;
  width: 350px;
  height: 455px;
}
#FEN_Gestion_Ground .lizere {
  background-color: #82EB00;
}
#FEN_Gestion_Ground .title {
  color: #82EB00;
}
#FEN_Gestion_Ground .content form #Div_EchelleU {
  width: 150px;
}
#FEN_Gestion_Ground .content form #Div_EchelleU #EchelleU {
  width: 60px;
}
#FEN_Gestion_Ground .content form #Div_EchelleV {
  position: absolute;
  width: 150px;
  top: 89px;
  left: 190px;
}
#FEN_Gestion_Ground .content form #Div_EchelleV #EchelleV {
  width: 60px;
}
#FEN_Gestion_Ground .content form #Div_InterNothing {
  position: absolute;
  top: 145px;
}
#FEN_Gestion_Ground .content form #Div_LibelleSculpter {
  position: absolute;
  top: 165px;
}
#FEN_Gestion_Ground .content form #Div_Sculpter {
  position: absolute;
  top: 215px;
  right: 60px;
}
#FEN_Gestion_Ground .content form #Div_Annule_sculpture {
  position: absolute;
  top: 215px;
  right: 5px;
}
#FEN_Gestion_Ground .content form #Div_RayonSculpture {
  position: absolute;
  top: 205px;
  width: 225px;
}
#FEN_Gestion_Ground .content form #Div_LibellePeindre {
  position: absolute;
  top: 265px;
  display: none;
}
#FEN_Gestion_Ground .content form #Div_RayonPeinture {
  position: absolute;
  top: 305px;
  width: 250px;
  display: none;
}
#FEN_Gestion_Ground .content form #Div_Peindre {
  position: absolute;
  top: 315px;
  right: 20px;
  display: none;
}
#FEN_Gestion_Ground .content form #Div_LibelleEau {
  position: absolute;
  top: 255px;
}
#FEN_Gestion_Ground .content form #Div_InterEau {
  position: absolute;
  top: 305px;
}
#FEN_Gestion_Ground .content form #Div_AltitudeEau {
  position: absolute;
  top: 345px;
  width: 330px;
}
#FEN_Gestion_Ground .content form #Div_CouleurEau {
  position: absolute;
  top: 275px;
  right: 20px;
}

#FEN_Decorations_Gammes {
  --couleurFenetre: #82EB00;
  width: 400px;
  height: 550px;
}
#FEN_Decorations_Gammes .content form {
  position: relative;
}
#FEN_Decorations_Gammes .content form .picker {
  height: 415px;
}

#FEN_Mur_Maison {
  --couleurFenetre: #82EB00;
  width: 780px;
  height: 700px;
}
#FEN_Mur_Maison .content form {
  position: relative;
  display: flex;
  flex-direction: row;
  /** IMAGES DECROCHES */
}
#FEN_Mur_Maison .content form div {
  position: absolute;
  width: 80px;
}
#FEN_Mur_Maison .content form div img {
  width: 100%;
  height: 100%;
}
#FEN_Mur_Maison .content form #Div_decroche_avantgauche {
  left: 30px;
  top: 500px;
  width: 100px;
}
#FEN_Mur_Maison .content form #Div_decroche_avantgauche_suivitoiture {
  left: 65px;
  top: 530px;
  width: 40px;
}
#FEN_Mur_Maison .content form #Div_decroche_avantgauche_suivitoiture label {
  left: -40px;
}
#FEN_Mur_Maison .content form #Div_decroche_avantgauche_profondeur {
  left: 65px;
  top: 450px;
}
#FEN_Mur_Maison .content form #Div_decroche_avantgauche_largeur {
  left: 140px;
  top: 500px;
}
#FEN_Mur_Maison .content form #Div_decroche_arrieregauche {
  left: 30px;
  top: 30px;
}
#FEN_Mur_Maison .content form #Div_decroche_arrieregauche_suivitoiture {
  left: 50px;
  top: -20px;
  width: 40px;
}
#FEN_Mur_Maison .content form #Div_decroche_arrieregauche_suivitoiture label {
  left: -40px;
}
#FEN_Mur_Maison .content form #Div_decroche_arrieregauche_profondeur {
  left: 60px;
  top: 90px;
}
#FEN_Mur_Maison .content form #Div_decroche_arrieregauche_largeur {
  left: 140px;
  top: 30px;
}
#FEN_Mur_Maison .content form #Div_decroche_avantdroit {
  left: 640px;
  top: 500px;
  width: 100px;
}
#FEN_Mur_Maison .content form #Div_decroche_avantdroit_suivitoiture {
  left: 675px;
  top: 530px;
  width: 40px;
}
#FEN_Mur_Maison .content form #Div_decroche_avantdroit_suivitoiture label {
  left: -40px;
}
#FEN_Mur_Maison .content form #Div_decroche_avantdroit_profondeur {
  left: 640px;
  top: 450px;
}
#FEN_Mur_Maison .content form #Div_decroche_avantdroit_largeur {
  left: 555px;
  top: 500px;
}
#FEN_Mur_Maison .content form #Div_decroche_arrieredroit {
  display: flex;
  left: 640px;
  top: 30px;
}
#FEN_Mur_Maison .content form #Div_decroche_arrieredroit_suivitoiture {
  left: 660px;
  top: -20px;
  width: 40px;
}
#FEN_Mur_Maison .content form #Div_decroche_arrieredroit_suivitoiture label {
  left: -40px;
}
#FEN_Mur_Maison .content form #Div_decroche_arrieredroit_profondeur {
  left: 640px;
  top: 90px;
}
#FEN_Mur_Maison .content form #Div_decroche_arrieredroit_largeur {
  left: 555px;
  top: 30px;
}
#FEN_Mur_Maison .content form #Div_renfoncement_avant_decalage {
  z-index: 10;
  left: 220px;
  top: 430px;
}
#FEN_Mur_Maison .content form #Div_renfoncement_avant_profondeur {
  z-index: 10;
  left: 284px;
  top: 485px;
}
#FEN_Mur_Maison .content form #Div_renfoncement_avant_largeur {
  z-index: 10;
  left: 339px;
  top: 390px;
}
#FEN_Mur_Maison .content form #Div_renfoncement_avant_rattrapagetoiture {
  z-index: 10;
  left: 444px;
  top: 440px;
  width: 80px;
}
#FEN_Mur_Maison .content form #Div_renfoncement_arriere_decalage {
  z-index: 10;
  left: 454px;
  top: 105px;
}
#FEN_Mur_Maison .content form #Div_renfoncement_arriere_profondeur {
  z-index: 10;
  left: 429px;
  top: 50px;
}
#FEN_Mur_Maison .content form #Div_renfoncement_arriere_largeur {
  z-index: 10;
  left: 339px;
  top: 145px;
}
#FEN_Mur_Maison .content form #Div_renfoncement_arriere_rattrapagetoiture {
  z-index: 10;
  left: 265px;
  top: 85px;
  width: 80px;
}
#FEN_Mur_Maison .content form #Div_renfoncement_gauche_decalage {
  z-index: 10;
  left: 185px;
  top: 160px;
}
#FEN_Mur_Maison .content form #Div_renfoncement_gauche_profondeur {
  z-index: 10;
  left: 55px;
  top: 210px;
}
#FEN_Mur_Maison .content form #Div_renfoncement_gauche_largeur {
  z-index: 10;
  left: 215px;
  top: 270px;
}
#FEN_Mur_Maison .content form #Div_renfoncement_gauche_rattrapagetoiture {
  z-index: 10;
  left: 170px;
  top: 330px;
  width: 80px;
}
#FEN_Mur_Maison .content form #Div_renfoncement_droit_decalage {
  z-index: 10;
  left: 625px;
  top: 320px;
}
#FEN_Mur_Maison .content form #Div_renfoncement_droit_profondeur {
  z-index: 10;
  left: 500px;
  top: 365px;
}
#FEN_Mur_Maison .content form #Div_renfoncement_droit_largeur {
  z-index: 10;
  left: 460px;
  top: 270px;
}
#FEN_Mur_Maison .content form #Div_renfoncement_droit_rattrapagetoiture {
  z-index: 10;
  left: 540px;
  top: 200px;
  width: 80px;
}
#FEN_Mur_Maison .content form #Div_renfoncement_avant {
  z-index: 10;
  left: 374px;
  top: 520px;
}
#FEN_Mur_Maison .content form #Div_renfoncement_arriere {
  z-index: 10;
  left: 344px;
  top: 0px;
}
#FEN_Mur_Maison .content form #Div_renfoncement_gauche {
  z-index: 10;
  left: 10px;
  top: 255px;
}
#FEN_Mur_Maison .content form #Div_renfoncement_droit {
  z-index: 10;
  left: 640px;
  top: 255px;
}
#FEN_Mur_Maison .content form #Div_image_haut_gauche_pan_coupe_fleche_largeur {
  z-index: 20;
  left: 160px;
  top: 60px;
  width: 40px;
  height: 20px;
}
#FEN_Mur_Maison .content form #Div_image_haut_gauche_pan_coupe_fleche_profondeur {
  z-index: 20;
  left: 140px;
  top: 80px;
  width: 20px;
  height: 40px;
}
#FEN_Mur_Maison .content form #Div_image_bas_gauche_pan_coupe_fleche_largeur {
  z-index: 20;
  left: 160px;
  top: 480px;
  width: 40px;
  height: 20px;
}
#FEN_Mur_Maison .content form #Div_image_bas_gauche_pan_coupe_fleche_profondeur {
  z-index: 20;
  left: 140px;
  top: 440px;
  width: 20px;
  height: 40px;
}
#FEN_Mur_Maison .content form #Div_image_bas_droite_pan_coupe_fleche_largeur {
  z-index: 20;
  left: 580px;
  top: 480px;
  width: 40px;
  height: 20px;
}
#FEN_Mur_Maison .content form #Div_image_bas_droite_pan_coupe_fleche_profondeur {
  z-index: 20;
  left: 620px;
  top: 440px;
  width: 20px;
  height: 40px;
}
#FEN_Mur_Maison .content form #Div_image_haut_droite_pan_coupe_fleche_largeur {
  z-index: 20;
  left: 580px;
  top: 60px;
  width: 40px;
  height: 20px;
}
#FEN_Mur_Maison .content form #Div_image_haut_droite_pan_coupe_fleche_profondeur {
  z-index: 20;
  left: 620px;
  top: 80px;
  width: 20px;
  height: 40px;
}
#FEN_Mur_Maison .content form #Div_image_renfoncement_avant_fleche_largeur {
  z-index: 20;
  display: flex;
  left: 344px;
  top: 420px;
  width: 92px;
  height: 20px;
}
#FEN_Mur_Maison .content form #Div_image_renfoncement_avant_fleche_profondeur {
  z-index: 20;
  display: flex;
  left: 324px;
  top: 440px;
  width: 20px;
  height: 40px;
}
#FEN_Mur_Maison .content form #Div_image_renfoncement_avant_fleche_decalage {
  z-index: 20;
  left: 160px;
  top: 450px;
  width: 184px;
  height: 20px;
}
#FEN_Mur_Maison .content form #Div_image_renfoncement_droit_fleche_largeur {
  z-index: 20;
  display: flex;
  left: 560px;
  top: 240px;
  width: 20px;
  height: 80px;
}
#FEN_Mur_Maison .content form #Div_image_renfoncement_droit_fleche_profondeur {
  z-index: 20;
  display: flex;
  left: 580px;
  top: 320px;
  width: 40px;
  height: 20px;
}
#FEN_Mur_Maison .content form #Div_image_renfoncement_droit_fleche_decalage {
  z-index: 20;
  left: 590px;
  top: 320px;
  width: 20px;
  height: 160px;
}
#FEN_Mur_Maison .content form #Div_image_renfoncement_arriere_fleche_largeur {
  z-index: 20;
  display: flex;
  left: 344px;
  top: 120px;
  width: 92px;
  height: 20px;
}
#FEN_Mur_Maison .content form #Div_image_renfoncement_arriere_fleche_profondeur {
  z-index: 20;
  display: flex;
  left: 436px;
  top: 80px;
  width: 20px;
  height: 40px;
}
#FEN_Mur_Maison .content form #Div_image_renfoncement_arriere_fleche_decalage {
  z-index: 20;
  left: 436px;
  top: 90px;
  width: 184px;
  height: 20px;
}
#FEN_Mur_Maison .content form #Div_image_renfoncement_gauche_fleche_largeur {
  z-index: 20;
  display: flex;
  left: 200px;
  top: 240px;
  width: 20px;
  height: 80px;
}
#FEN_Mur_Maison .content form #Div_image_renfoncement_gauche_fleche_profondeur {
  z-index: 20;
  display: flex;
  left: 160px;
  top: 220px;
  width: 40px;
  height: 20px;
}
#FEN_Mur_Maison .content form #Div_image_renfoncement_gauche_fleche_decalage {
  z-index: 20;
  display: flex;
  left: 170px;
  top: 80px;
  width: 20px;
  height: 160px;
}
#FEN_Mur_Maison .content form #Div_image_base {
  z-index: 0;
  display: flex;
  left: 160px;
  top: 80px;
  width: 460px;
  height: 400px;
}
#FEN_Mur_Maison .content form #Div_image_bas_gauche_decroche {
  display: flex;
  left: 160px;
  top: 440px;
  width: 40px;
  height: 40px;
}
#FEN_Mur_Maison .content form #Div_image_bas_gauche_pan_coupe {
  display: flex;
  left: 160px;
  top: 440px;
  width: 40px;
  height: 40px;
}
#FEN_Mur_Maison .content form #Div_image_bas_droite_decroche {
  display: flex;
  left: 580px;
  top: 440px;
  width: 40px;
  height: 40px;
}
#FEN_Mur_Maison .content form #Div_image_bas_droite_pan_coupe {
  display: flex;
  left: 580px;
  top: 440px;
  width: 40px;
  height: 40px;
}
#FEN_Mur_Maison .content form #Div_image_haut_droite_decroche {
  display: flex;
  left: 580px;
  top: 80px;
  width: 40px;
  height: 40px;
}
#FEN_Mur_Maison .content form #Div_image_haut_droite_pan_coupe {
  display: flex;
  left: 580px;
  top: 80px;
  width: 40px;
  height: 40px;
}
#FEN_Mur_Maison .content form #Div_image_haut_gauche_decroche {
  display: flex;
  left: 160px;
  top: 80px;
  width: 40px;
  height: 40px;
}
#FEN_Mur_Maison .content form #Div_image_haut_gauche_pan_coupe {
  display: flex;
  left: 160px;
  top: 80px;
  width: 40px;
  height: 40px;
}
#FEN_Mur_Maison .content form #Div_image_face_avant_renfoncement {
  display: flex;
  left: 344px;
  top: 440px;
  width: 92px;
  height: 40px;
}
#FEN_Mur_Maison .content form #Div_image_face_gauche_renfoncement {
  display: flex;
  left: 160px;
  top: 240px;
  width: 40px;
  height: 80px;
}
#FEN_Mur_Maison .content form #Div_image_face_arriere_renfoncement {
  display: flex;
  left: 344px;
  top: 80px;
  width: 92px;
  height: 40px;
}
#FEN_Mur_Maison .content form #Div_image_face_droite_renfoncement {
  display: flex;
  left: 580px;
  top: 240px;
  width: 40px;
  height: 80px;
}

#FEN_Variables_Generales {
  --couleurFenetre: #FF7800;
  width: 400px;
  height: 550px;
}
#FEN_Gestion_Domes {
  --couleurFenetre: #82EB00;
  width: 400px;
  height: 550px;
}

#FEN_Eclairages_Plafond_Plat {
  --couleurFenetre: #82EB00;
  width: 400px;
  height: 300px;
}
#FEN_Eclairages_Plafond_Plat .content form #Div_BTNPositionne_eclairage {
  bottom: 30px;
  left: 350px;
  position: absolute;
}
#FEN_Eclairages_Plafond_Plat .content form #Div_Zone {
  bottom: 30px;
  left: 220px;
  position: absolute;
  width: 100px;
}
#FEN_Eclairages_Plafond_Plat .content form #Div_ListeEclairages {
  bottom: 30px;
  position: absolute;
  width: 200px;
}

#FEN_Parametres_Impression {
  --couleurFenetre:#FF7800;
  width: 300px;
  height: 165px;
}
#FEN_Parametres_Impression #Div_Submit {
  text-align: center;
}

#FEN_Toolbar_Deplacements {
  --couleurFenetre: #FF7800;
}

#FEN_Toolbar_Selection {
  --couleurFenetre: #FF7800;
  width: auto;
}
#FEN_Toolbar_Selection .content form {
  display: flex;
  flex-direction: row;
}
#FEN_Toolbar_Selection .content form > div {
  flex-direction: row;
}
#FEN_Toolbar_Selection .content form > div .separationVerticale {
  display: inherit;
}
#FEN_Toolbar_Selection .content form > div .separationHorizontale {
  display: none;
}
#FEN_Toolbar_Selection .content form > div button {
  width: 30px;
  height: 30px;
}
#FEN_Toolbar_Selection .content form > div:last-child .separationVerticale {
  display: none;
}

#FEN_Toolbar_Translation {
  --couleurFenetre: #FF7800;
  width: auto;
}
#FEN_Toolbar_Translation .content form {
  display: flex;
  flex-direction: row;
}
#FEN_Toolbar_Translation .content form > div {
  flex-direction: row;
}
#FEN_Toolbar_Translation .content form > div .separationVerticale {
  display: inherit;
}
#FEN_Toolbar_Translation .content form > div .separationHorizontale {
  display: none;
}
#FEN_Toolbar_Translation .content form > div button {
  width: 30px;
  height: 30px;
}
#FEN_Toolbar_Translation .content form > div:last-child .separationVerticale {
  display: none;
}

#FEN_Toolbar_Rotation {
  --couleurFenetre: #FF7800;
  width: auto;
}
#FEN_Toolbar_Rotation .content form {
  display: flex;
  flex-direction: row;
}
#FEN_Toolbar_Rotation .content form > div {
  flex-direction: row;
}
#FEN_Toolbar_Rotation .content form > div .separationVerticale {
  display: inherit;
}
#FEN_Toolbar_Rotation .content form > div .separationHorizontale {
  display: none;
}
#FEN_Toolbar_Rotation .content form > div button {
  width: 30px;
  height: 30px;
}
#FEN_Toolbar_Rotation .content form > div:last-child .separationVerticale {
  display: none;
}

#FEN_Toolbar_Sauvegarde {
  --couleurFenetre: #FF7800;
}

#FEN_Toolbar_Vues {
  --couleurFenetre: #FF7800;
}

#FEN_Toolbar_Structure {
  --couleurFenetre: #82EB00;
}

#FEN_Toolbar_Outils {
  --couleurFenetre: #FF7800;
}

#FEN_Toolbar_Rendu {
  --couleurFenetre: #00DCFF;
}

#FEN_Toolbar_Adaptation {
  --couleurFenetre: #00DCFF;
}
#FEN_Toolbar_Adaptation form #Div_ProjectScale {
  display: flex;
  align-items: center;
  margin-left: 50px;
}
#FEN_Toolbar_Adaptation form #Div_ProjectScale input {
  transform: rotate(180deg);
}

#FEN_Toolbar_DessinStructure {
  --couleurFenetre: #FF7800;
}

#FEN_Toolbar_DessinConstruction {
  --couleurFenetre: #FF7800;
}

#FEN_Toolbar_i {
  --couleurFenetre: #FF7800;
}

#FEN_Toolbar_Toolbars {
  --couleurFenetre: #FF7800;
}

#FEN_Toolbar_UndoRedo {
  --couleurFenetre: #FF7800;
}

#FEN_Toolbar_Developpeur {
  --couleurFenetre: #FF7800;
}

.htmlIW {
  height: 100vh;
  width: 100%;
  margin-left: -8px;
  margin-top: -8px;
  overflow: hidden;
}

.bodyIW {
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  font-size: 8pt;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #464650;
  top: 0;
  position: absolute;
  right: 0;
}

#divDiv {
  height: calc(100vh - 55px);
  width: 100%;
}

.spinIW, .grey-screenIW {
  display: none;
}

.chargement {
  display: none;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 100%;
  height: calc(100vh - 55px);
  z-index: 50;
  top: 10%;
  font-size: larger;
}

.result {
  position: absolute;
  top: 55px;
  z-index: 20;
  width: 15%;
  height: auto;
  left: 42.5%;
  font-size: larger;
}

.result > div {
  border: solid;
  background-color: #464650;
  padding: 5%;
  border-radius: 5px;
  text-align: center;
  margin-top: -100%;
  transition: 0.5s ease-in-out;
  height: auto;
}

.liensIW {
  box-shadow: none !important;
}

.ButtonSVGIW {
  height: 3vh !important;
  width: 3vh !important;
}

.ButtonSVGIW:not([disabled]):hover {
  background: #FF7800 !important;
}

.formIW > input {
  margin-top: 2%;
  width: 96% !important;
  margin-bottom: 2%;
  cursor: pointer;
  text-align: center;
}

.formIW > input:not([type=color]), .mot_commercial {
  background-color: #464650 !important;
  opacity: 1;
}

.formIW > div {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.content > .formIW {
  width: 100%;
  height: auto;
  font-size: 8pt;
}

.headerIW {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.headerIW > .bandeauIW {
  background-color: #464650;
  padding: 0px;
  margin: 0px;
  border: var(--borderHeaderBandeau);
  width: var(--widthHeaderBandeau);
  height: var(--heightHeaderBandeau);
  background-size: 100% 15px;
  display: flex;
  flex-direction: row-reverse;
}

.headerIW > .lizereIW {
  width: var(--widthHeaderLizere) !important;
  height: var(--heightHeaderLizere) !important;
  background-color: #FF7800 !important;
}

.headerIW > .titleIW {
  color: #FF7800 !important;
  width: 100%;
  text-align: center;
  user-drag: none;
  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  font-size: 11pt;
  text-transform: uppercase;
  margin-top: 5px;
  padding-bottom: 1mm;
}

.headerIW > img {
  margin: 10px;
  width: 90%;
  height: auto;
  box-shadow: 0px 0px 15px -2px rgba(0, 0, 0, 0.5);
}

.read_onlyIW {
  pointer-events: none;
  opacity: 0.7 !important;
}

.read_only_nIW {
  pointer-events: none;
}

body {
  --heightHeaderLizere: 2.25px;
  --heightHeaderBandeau: 15px;
  --couleurBackFonce: #464650;
  --couleurBackFormHover: rgba(0, 0, 0, 0.5);
  --couleurTouche: #FF7800;
  --widthHeaderLizere: 100%;
  --widthHeaderBandeau: 100%;
  --widthFormPickerCard: clamp(50px, 25%, 150px);
  --borderHeaderBandeau: 0px none;
  --backgroundSizeFormPickerCardPreview: 70%;
}

.devisIW {
  display: flex;
  flex-direction: row;
  justify-items: center;
  transition: filter 0.1s ease-in-out;
}

.devisIW > div {
  opacity: 1;
  transition: width 0.5s ease-in-out;
}

.devisIW > div > div {
  transition: opacity 0.15s ease-in-out;
}

.deplier_gauche, .deplier_droit {
  width: 1%;
  height: 5%;
  transition: width 0.2s ease-in-out;
  background-color: #64646E;
  box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.5);
  position: absolute;
  bottom: 50%;
  z-index: 1;
  background-repeat: no-repeat;
  background-origin: content-box;
  background-position: center;
  background-size: 70%;
  cursor: pointer;
  transition: left 0.5s ease-in-out 0s, right 0.5s ease-in-out 0s, width 0.1s ease-in-out;
}

.deplier_droit:hover, .deplier_gauche:hover {
  width: 1.3%;
}

.deplier_gauche {
  background-image: url("../../../web/IMAGES/fleche-vers-le-bas.png");
  left: 15%;
}

.gauche {
  padding-top: 1%;
  padding-bottom: 1%;
  width: 15%;
  min-height: 100px;
  background-color: #64646E;
  box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.5);
  transition: 0.1s;
  overflow-y: scroll;
  z-index: 20;
}

.gauche > .content {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.gauche > .content > div > div {
  background-color: #464650;
  margin: 15px;
  cursor: pointer;
}

.Div_Hover {
  width: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.Div_Hover:hover {
  background-color: #6c757d;
}

.details_de_details {
  text-align: center;
  padding: 15px;
  padding-top: 0px;
}

.deplier_droit {
  right: 15%;
  background-image: url("../../../web/IMAGES/fleche-vers-le-bas (1).png");
}

.droit {
  height: auto;
  width: 15%;
  background-color: #64646E;
  box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.5);
  transition: 0.1s;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  z-index: 20;
  padding-top: 1%;
  padding-bottom: 1%;
}

.droit > div {
  width: 90%;
  height: auto;
}

.FORM_PRIX {
  height: auto;
}

.moins_important > label {
  color: #adb5bd;
}

.form_fen_fichiers > div > .pickerIW {
  height: 12vh;
}

.pickerIW .cardIW:hover {
  background-color: #6c757d !important;
}

.pickerIW .cardIW {
  width: var(--widthFormPickerCard) !important;
}

.pickerIW .cardIW .previewIW {
  background-size: var(--backgroundSizeFormPickerCardPreview) !important;
}

.SVG_voirIW {
  -webkit-mask: url("./../../style/icones/oeil.svg");
  mask: url("./../../style/icones/oeil.svg");
}

.droit > #Div_Form_Commercial {
  background-color: #64646E;
}

.Form_commercial > div > label {
  width: auto;
  margin-right: 5%;
}

.Form_commercial > div > label > img {
  height: 2.5vh;
  width: auto;
}

.mot_commercial {
  box-sizing: border-box;
  width: 100%;
  padding: 6px 5px;
  font-size: 8pt;
  color: var(--fontColorBody);
  border: none;
  border-radius: 5px;
  height: 10vh;
  background: #464650;
  overflow-y: scroll;
}

.div_agence > a > button > img {
  height: 2vh;
}

.div_agence > a > button {
  width: auto;
  height: auto;
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
}

.div_agence > a {
  width: 21px;
  height: 21px;
  position: fixed;
  right: 1.45%;
  bottom: 5.4%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
}

.main {
  background-color: #64646E;
  width: 70%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: 0.1s ease-in-out;
}

.main_photo {
  width: 90%;
  height: 90%;
  box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  z-index: 20;
}

.photo_en_grand {
  width: 100%;
  height: 87%;
  display: flex;
  justify-content: center;
}

.photo_en_grand > iframe {
  height: 100%;
  width: 100%;
}

.photo_en_grand > img {
  display: none;
  max-height: 100%;
  width: auto;
  min-height: auto;
  max-width: 100%;
}

.agrandir {
  transition: 0.5s;
  transition: right 0.5s ease-in-out, width 0.2s ease-in-out, height 0.2s ease-in-out;
  width: 40px;
  height: 40px;
  position: absolute;
  right: 18.5%;
  z-index: 1;
  background-image: url("../../../web/IMAGES/agrandir.png");
  background-repeat: no-repeat;
  background-origin: content-box;
  background-position: center;
  background-size: 50%;
  cursor: pointer;
}

.agrandir:hover {
  width: 45px;
  height: 45px;
  transition-duration: 0.2s;
}

.carrousel {
  width: 100%;
  height: 13%;
  box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  overflow: hidden;
}

.button_left, .button_right {
  transition: width 0.1s ease-in-out;
  height: 100%;
  width: 1%;
  padding-left: 5px;
  padding-right: 5px;
  background-color: #FF7800;
  z-index: 40;
  cursor: pointer;
  position: relative;
}

.button_left:hover, .button_right:hover {
  width: 1.5%;
}

.button_left::before, .button_right::before {
  content: "";
  background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjE3IiBoZWlnaHQ9IjE3Ij4NCiAgPHBhdGggZD0iTTQuMjE5NjcgOC40Njk2N0M0LjUxMjU2IDguMTc2NzggNC45ODc0NCA4LjE3Njc4IDUuMjgwMzMgOC40Njk2N0wxMiAxNS4xODkzTDE4LjcxOTcgOC40Njk2N0MxOS4wMTI2IDguMTc2NzggMTkuNDg3NCA4LjE3Njc4IDE5Ljc4MDMgOC40Njk2N0MyMC4wNzMyIDguNzYyNTYgMjAuMDczMiA5LjIzNzQ0IDE5Ljc4MDMgOS41MzAzM0wxMi41MzAzIDE2Ljc4MDNDMTIuMjM3NCAxNy4wNzMyIDExLjc2MjYgMTcuMDczMiAxMS40Njk3IDE2Ljc4MDNMNC4yMTk2NyA5LjUzMDMzQzMuOTI2NzggOS4yMzc0NCAzLjkyNjc4IDguNzYyNTYgNC4yMTk2NyA4LjQ2OTY3WiIgZmlsbD0id2hpdGUiIC8+DQo8L3N2Zz4=");
  transform: rotate(90deg);
  background-repeat: no-repeat;
  background-origin: content-box;
  background-position: center;
  background-size: 100%;
  z-index: 999;
  position: absolute;
  top: 40%;
  left: 0;
  width: 100%;
  height: 20%;
}

.button_right::before {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjE3IiBoZWlnaHQ9IjE3Ij4NCiAgPHBhdGggZD0iTTQuMjE5NjcgOC40Njk2N0M0LjUxMjU2IDguMTc2NzggNC45ODc0NCA4LjE3Njc4IDUuMjgwMzMgOC40Njk2N0wxMiAxNS4xODkzTDE4LjcxOTcgOC40Njk2N0MxOS4wMTI2IDguMTc2NzggMTkuNDg3NCA4LjE3Njc4IDE5Ljc4MDMgOC40Njk2N0MyMC4wNzMyIDguNzYyNTYgMjAuMDczMiA5LjIzNzQ0IDE5Ljc4MDMgOS41MzAzM0wxMi41MzAzIDE2Ljc4MDNDMTIuMjM3NCAxNy4wNzMyIDExLjc2MjYgMTcuMDczMiAxMS40Njk3IDE2Ljc4MDNMNC4yMTk2NyA5LjUzMDMzQzMuOTI2NzggOS4yMzc0NCAzLjkyNjc4IDguNzYyNTYgNC4yMTk2NyA4LjQ2OTY3WiIgZmlsbD0id2hpdGUiIC8+DQo8L3N2Zz4=");
  transform: rotate(-90deg);
}

.photo_en_petit {
  position: relative;
  left: 0px;
  height: 100%;
  width: 98%;
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  transition: 0.5s ease-in-out;
  background-color: #464650;
}

.photo_en_petit > * {
  height: 100%;
  padding-right: 5px;
  transition: 0.1s;
  cursor: pointer;
}

.photo_en_petit > *:hover {
  transform: scale(1.1);
  transition-duration: 0.3s;
  width: auto;
}

.photo_en_petit > img {
  transition: transform 0.3s ease-in-out;
}

.BabylonJS::after {
  content: "3D";
  color: black;
  position: relative;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 20px;
}

.BabylonJS {
  width: auto;
  height: 100%;
}

.div_BabylonJS {
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
  z-index: 2;
  height: 100%;
  transition: transform 0.3s ease-in-out;
}

.div_BabylonJS > img {
  filter: blur(5px);
}

.div_BabylonJS > div {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: absolute;
  z-index: 2;
  width: auto;
  height: auto;
  background-origin: border-box;
}

.div_BabylonJS > div > p {
  text-align: center;
  width: 100%;
  height: 5%;
  top: 0%;
  transition: opacity 0.3s 0s ease-in-out;
  opacity: 0;
  color: #000;
}

.div_BabylonJS > div > img {
  height: 3vh;
  width: auto;
  transition: height, width 0.3s 0s ease-in-out;
}

.div_mdp_oublie {
  position: absolute;
  width: 100%;
  height: 100vh;
  align-items: center;
  justify-content: center;
  z-index: 30;
}

#div_mdp_oublie {
  background-color: #64646E;
}

.FORM_LOGIN > div, .FORM_MDP_OUBLIE > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

#Div_Form_login, #content_login, .FORM_LOGIN, #div_mdp_oublie, .FORM_MDP_OUBLIE {
  position: inherit !important;
  height: auto !important;
}

#page_login {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200% !important;
  height: 100vh !important;
  background-color: rgba(0, 0, 0, 0.5);
  font-size: 8pt;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  transition: 0.5s ease-in-out;
}

#content_form {
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.topBarIW {
  background-color: #464650 !important;
  border-color: #464650 !important;
  height: 55px;
  z-index: 30;
  position: relative;
  justify-content: center;
}

.topBarIW > div.Center #FEN_Toolbar_Choix_PageIW {
  background-color: #64646E !important;
  padding: 0 15px;
  border-radius: 50px;
}

#separation-mode2DIW {
  height: 80% !important;
  width: 0.5px !important;
  margin-top: 0px !important;
}

.toolbarsIW .contentIW {
  align-items: center;
}

.SVG_utilisateurIW {
  -webkit-mask: url("style/icones/utilisateur.svg");
  mask: url("/style/icones/utilisateur.svg");
}

.deconnexion {
  position: absolute;
  z-index: 999;
  right: 1%;
  top: 0%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  padding: 5px;
}

.deconnexion > img {
  height: 5vh;
  width: auto;
}

.btn-closeIW {
  width: 15px;
  height: 15px;
  padding: 0px;
  margin: 0px;
  border: 0px none;
  user-drag: none;
  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

.forButton {
  display: flex;
  align-items: center !important;
  justify-content: center;
  margin: 2%;
}

#Div_Form_user {
  position: absolute;
  z-index: 60;
  top: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  opacity: 0;
  width: 100%;
  height: 100%;
}

#Div_Form_user > div {
  background-color: #64646E;
  width: 25%;
}

#Div_Form_user > form {
  background-color: #64646E;
  width: 25%;
  transition: 0.1s ease-in-out;
}

#Div_Form_user > * {
  opacity: 0;
  transition: 0.1s ease-in-out;
}

#Div_Form_user > form > * {
  margin-right: 2%;
  margin-left: 2%;
  transition: 0.1s ease-in-out;
}

#mdp_user {
  background-color: #464650 !important;
  cursor: pointer;
}

#nom_prenom {
  font-size: 11pt;
}

.conceptionIW {
  display: none;
  background-color: blueviolet;
}

:root {
  --couleurFenetre: #FF7800;
}

body {
  color: #ffffff;
}

.mainContentTchat {
  height: 100%;
  display: flex;
  flex-direction: row;
}
.mainContentTchat .titre {
  font-size: 12pt;
  font-weight: bold;
}
.mainContentTchat .texte {
  font-size: 11pt;
}
.mainContentTchat .topBar {
  height: 70px;
  padding-left: 10px;
  z-index: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  border-left: solid 1px #FF7800;
  position: relative;
  background-color: #464650;
  background-color: #464650;
  box-shadow: 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12), 0px 5px 5px -3px rgba(0, 0, 0, 0.2);
}
.mainContentTchat .destinataireInfos {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
.mainContentTchat #destinataire {
  display: flex;
  width: 100%;
  justify-content: space-between;
  flex-direction: row;
}
.mainContentTchat .infos {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin: auto;
  justify-content: left;
}
.mainContentTchat .societe {
  font-size: 8pt;
}
.mainContentTchat #userMiscMenu:hover {
  background-color: white;
}
.mainContentTchat .leftBar {
  height: 100%;
  padding: 10px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 270px;
  background-color: #464650;
  box-shadow: 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12), 0px 5px 5px -3px rgba(0, 0, 0, 0.2);
  transition: 0.3s ease;
}
.mainContentTchat .leftTopBar {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  background: #464650;
}
.mainContentTchat .leftTopBarCut {
  margin-bottom: 15px;
}
.mainContentTchat #userLog {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  margin-bottom: 5px;
}
.mainContentTchat #userProfil {
  width: 60px;
  border-radius: 5px;
  border: solid 1px #464650;
}
.mainContentTchat #userProfil:hover {
  border: solid 1px #FF7800;
}
.mainContentTchat #disconnectImg {
  width: 60px;
}
.mainContentTchat .searchbar {
  align-items: center;
  justify-content: center;
  text-align: center;
  border: solid 1px #FF7800 !important;
  background-color: #64646E !important;
}
.mainContentTchat #searchList {
  display: flex;
  position: fixed;
  width: 270px;
  margin: 5px 0;
  padding: 0;
  background: #64646E;
  justify-content: center;
  flex-direction: column;
  list-style-type: none;
  list-style-position: inside;
  z-index: 3;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
.mainContentTchat #searchList li {
  margin: 5px 10px;
  border: solid 1px grey;
  border-left: none;
  border-right: none;
}
.mainContentTchat #user {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mainContentTchat #user:hover {
  background-color: #464650;
}
.mainContentTchat #searchlistPfp {
  width: 30px;
  height: 30px;
  border-radius: 5px;
}
.mainContentTchat .autocompletion {
  display: flex;
  justify-content: center;
}
.mainContentTchat .loadPendingInvitation {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
.mainContentTchat .separateur {
  width: 240px;
  height: 2px;
  border-color: #FF7800;
  border-style: none;
  background-color: #FF7800;
}
.mainContentTchat .text-separateur {
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  text-decoration: underline;
  padding: 10px;
  margin: auto 0px;
}
.mainContentTchat .bottomLeftBar {
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-color: rgba(255, 255, 255, 0.7019607843) transparent;
  box-sizing: border-box;
}
.mainContentTchat a {
  color: white;
  text-decoration: none;
}
.mainContentTchat a:visited {
  color: white;
}
.mainContentTchat a:hover {
  color: #FF7800;
}
.mainContentTchat .messageInterface {
  width: calc(100% - 270px);
  height: 100%;
  background-color: #64646E;
}
.mainContentTchat .msgBox:hover {
  background-color: rgba(255, 255, 255, 0.041);
}
.mainContentTchat .time {
  font-style: normal;
  color: rgb(201, 201, 201);
  font-size: 8pt;
}
.mainContentTchat .container {
  height: calc(100% - 70px - 125px);
  overflow-y: scroll;
  scrollbar-color: rgba(255, 255, 255, 0.7019607843) transparent;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.mainContentTchat .container:has(.inviteContainer) {
  align-items: center;
}
.mainContentTchat .date-separator {
  top: 0;
  left: 0;
  justify-content: center;
  display: flex;
  border: solid 1px #464650;
  background-color: #64646E;
  border-radius: 20px;
  padding: 10px;
  z-index: 5;
  font-size: 11pt;
  width: -moz-fit-content;
  width: fit-content;
}
.mainContentTchat .hr-date-separateur {
  position: absolute;
  left: 0;
  width: 100%;
  background: #464650;
  border: 1px solid #464650;
  border-bottom: none;
}
.mainContentTchat .msgSeparateur {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.mainContentTchat .stickyDate {
  position: sticky;
  top: 20px;
  align-items: center;
  text-align: center;
  justify-content: center;
  display: flex;
  border: solid 1px #464650;
  background-color: #64646E;
  border-radius: 20px;
  padding: 10px;
  z-index: 5;
  font-size: 11pt;
  margin: 10px auto;
}
.mainContentTchat .pjImage {
  width: auto;
  height: auto;
  max-width: 200px;
  max-height: 200px;
}
.mainContentTchat #attachedFiles {
  display: flex;
  flex-direction: column;
}
.mainContentTchat #attachedFiles a {
  width: -moz-fit-content;
  width: fit-content;
}
.mainContentTchat .pfp {
  width: 35px;
  border-radius: 5px;
  position: relative;
  display: block;
}
.mainContentTchat .profil {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
}
.mainContentTchat .contactProfil {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 5px;
  gap: 10px;
  border-radius: 5px;
  width: -webkit-fill-available;
}
.mainContentTchat .contactProfil:hover {
  background-color: #64646E;
}
.mainContentTchat .active {
  background-color: #64646E;
}
.mainContentTchat .contactColumn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.mainContentTchat #sender {
  position: fixed;
  width: calc(100% - 270px - 50px);
  bottom: 0;
  margin-bottom: 10px;
}
.mainContentTchat #sender, .mainContentTchat .container {
  padding: 0px 20px;
}
.mainContentTchat #sendButton {
  width: 50px;
}
.mainContentTchat #sendIcon:hover {
  background-color: white;
}
.mainContentTchat #editor {
  display: flex;
  background-color: #464650;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  border-color: #464650;
}
.mainContentTchat .ql-editor {
  width: 100%;
}
.mainContentTchat .ql-editor .ql-syntax {
  width: calc(100% - 35px);
}
.mainContentTchat #toolbar {
  align-items: center;
  display: flex;
  background-color: #64646E;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-color: #464650;
}
.mainContentTchat .drag-active {
  opacity: 60%;
}
.mainContentTchat .dropzoneVisible {
  background-color: rgba(173, 187, 202, 0.308);
  cursor: pointer;
}
.mainContentTchat .messageInput {
  display: flex;
  justify-content: center;
  flex-direction: row;
}
.mainContentTchat .textInput {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.mainContentTchat input[type=file]::file-selector-button {
  display: none;
}
.mainContentTchat .preview {
  display: flex;
  justify-content: flex-end;
  flex-direction: row-reverse;
  align-items: center;
  padding: 0 5px;
}
.mainContentTchat .preview img {
  width: 50px;
}
.mainContentTchat .div-preview {
  display: flex;
  flex-direction: row;
  align-items: center;
  overflow-x: auto;
  width: 500px;
  scrollbar-color: rgba(255, 255, 255, 0.7019607843) transparent;
}
.mainContentTchat .item-preview {
  padding: 0 20px;
}
.mainContentTchat .structure {
  display: flex;
  flex-direction: row;
  width: 100%;
  align-items: center;
}
.mainContentTchat .notif-badge {
  position: absolute;
  border-radius: 100%;
  /* margin: auto; */
  top: -19px;
  border: 3px solid #464650;
  right: -7px;
  z-index: 10;
  background-color: #FF7800;
  padding: 1px 4px;
  font-size: 8pt;
}
.mainContentTchat .blockButton {
  padding: 10px;
}
.mainContentTchat .inviteContainer {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  background-color: #464650;
  border-radius: 5px;
  box-shadow: 0px 0px 54px -13px rgba(0, 0, 0, 0.75);
  width: -moz-fit-content;
  width: fit-content;
  margin-top: 50px;
}
.mainContentTchat .inviteContainer p {
  margin: auto;
  padding: 10px;
}
.mainContentTchat .inviteButton {
  margin: 10px;
  padding: 10px;
  border-radius: 10px;
  color: white;
  border: solid 1px #FF7800;
  transition: ease-in-out 0.5s;
}
.mainContentTchat .inviteButton:hover {
  border: white 1px solid;
}
.mainContentTchat .sendInvite {
  padding: 10px;
  margin: 10px 80px;
  border: solid 1px #FF7800;
  border-radius: 10px;
  color: white;
  transition: ease-in-out 0.5s;
}
.mainContentTchat .sendInvite:hover {
  border: white 1px solid;
}
.mainContentTchat .msgBox p {
  margin: 5px;
}
.mainContentTchat .blacklist {
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
  gap: 10px;
  padding: 5px;
  border-radius: 10px;
  width: -webkit-fill-available;
}
.mainContentTchat .blacklist:hover {
  background-color: #64646E;
}
.mainContentTchat .justify-spacebetween {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  padding: 10px 0px;
}
.mainContentTchat .userStatus {
  width: 17px;
  height: 17px;
  position: relative;
  margin-top: -30%;
  margin-left: 68%;
  z-index: 2;
  background-color: #464650;
  border-radius: 10px;
  display: block;
}
.mainContentTchat .image-wrapper {
  position: relative;
}
.mainContentTchat .icon {
  width: 35px;
  height: 35px;
  display: flex;
  background-color: #FF7800;
}
.mainContentTchat .tinyIcon {
  width: 15px;
  height: 15px;
  display: flex;
  background-color: #FF7800;
}
.mainContentTchat .tinyIcon:hover {
  opacity: 50%;
}
.mainContentTchat .pjText-not-active {
  display: none;
}
.mainContentTchat .pj-drag-active {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  text-align: center;
}
.mainContentTchat babylon-viewer {
  display: flex;
  width: 400px;
}
.mainContentTchat .ql-picker-options {
  transform: translateY(-120%);
}
.mainContentTchat .categorie {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.mainContentTchat .leftBarCategorie:has(section:empty) {
  display: none;
}
.mainContentTchat .item-preview {
  display: flex;
  flex-direction: row-reverse;
}
.mainContentTchat .SVG_cross {
  width: 20px;
  height: 20px;
  background-color: #FF7800;
}
.mainContentTchat .blacklistCross {
  display: none;
}
.mainContentTchat .SVG_cross:hover {
  background-color: white;
}
@media screen and (max-width: 1050px) {
  .mainContentTchat .blacklist {
    padding: 5px 0px;
  }
  .mainContentTchat section {
    justify-content: center;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
  }
  .mainContentTchat #usernameProfil {
    display: none;
  }
  .mainContentTchat #userProfil {
    width: 40px;
  }
  .mainContentTchat .categorie {
    justify-content: left;
  }
  .mainContentTchat .contactId {
    display: none;
  }
  .mainContentTchat .leftBar {
    width: 40px;
  }
  .mainContentTchat .leftBar.expanded {
    width: 270px;
  }
  .mainContentTchat .bottomLeftBar {
    overflow-y: hidden;
  }
  .mainContentTchat .bottomLeftBar.expanded {
    overflow-y: auto;
  }
  .mainContentTchat .messageInterface {
    width: calc(100% - 30px);
  }
  .mainContentTchat #sender {
    width: -webkit-fill-available;
  }
  .mainContentTchat .contactProfil {
    align-content: center;
    padding: 5px 0px;
  }
  .mainContentTchat #searchList {
    width: 200px;
  }
  .mainContentTchat .icon {
    display: flex;
  }
  .mainContentTchat .text-separateur {
    display: none;
  }
  .mainContentTchat .searchForm {
    display: none;
  }
  .mainContentTchat .div-preview {
    width: 350px;
  }
}
@media screen and (max-width: 850px) {
  .mainContentTchat .titre {
    font-size: 9pt;
  }
  .mainContentTchat .societe {
    font-size: 7pt;
  }
  .mainContentTchat .texte {
    font-size: 9pt;
  }
}

.mainContentTchatLogin {
  height: 100%;
  width: 100%;
  background-color: #464650;
}
.mainContentTchatLogin h1 {
  position: relative;
  justify-content: center;
  text-align: center;
  margin: 0;
}
.mainContentTchatLogin .loginForm {
  position: relative;
  width: 350px;
}
.mainContentTchatLogin .loginCard {
  background-color: #64646E;
  padding: 40px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  position: relative;
  border: solid 1px #FF7800;
  width: 350px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}
.mainContentTchatLogin #email {
  margin-bottom: 15px;
}
.mainContentTchatLogin #password {
  margin-bottom: 15px;
}
.mainContentTchatLogin #submit {
  margin-top: 15px;
}
.mainContentTchatLogin h1 {
  margin-bottom: 20px;
}

.mainContentBannedPage {
  color: white;
  height: 100%;
  width: 100%;
  background-color: #464650;
}

.mainContentTchatServer {
  height: 100%;
  width: 100%;
  background-color: #64646E;
}
.mainContentTchatServer .chooseServer {
  position: relative;
  width: 250px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}
.mainContentTchatServer p {
  margin: auto;
  justify-content: center;
  display: flex;
  top: 45%;
  position: relative;
}
.mainContentTchatServer select {
  margin: 10px 0px;
}/*# sourceMappingURL=Leonard Solutions.css.map */